<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover.css案例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-V06iGeOYiHqaJG18vU/udsyVfgcm8Pgax9HmoZh65R0FrT9X2GZZ8w2ZQcZkzZGV" crossorigin="anonymous">
<link rel="stylesheet" href="./css/hover.css">
<style>
body {
background-color: #ececea;
margin: 20px 40px;
}
.item {
width: 180px;
height: 120px;
background-color: rgb(8, 100, 100);
color: #eee;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item1 {
width: 180px;
height: 120px;
background-color: rgb(193, 43, 48);
color: #eee;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item2 {
width: 180px;
height: 120px;
background-color: rgb(157, 205, 99);
color: #333;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
.item3 {
width: 180px;
height: 120px;
background-color: #ccc;
color: #7430b0;
text-align: center;
line-height: 120px;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body>
<div id="hovercss" class="container">
<div class="block2d">
<h2>2D效果</h2>
<div class="item hvr-grow " data-bs-toggle="tooltip" data-bs-placement="top" title="从中心点放大">Grow</div>
<div class="item hvr-shrink " data-bs-toggle="tooltip" data-bs-placement="top" title="从中心点缩小">Shrink</div>
<div class="item hvr-pulse " data-bs-toggle="tooltip" data-bs-placement="top" title="循环从中心点放大缩小">Pulse</div>
<div class="item hvr-pulse-grow" data-bs-toggle="tooltip" data-bs-placement="top"
title="循环从中心点只放大，速度更快，但是幅度较小">
Pulsegrow
</div>
<div class="item hvr-pulse-shrink" data-bs-toggle="tooltip" data-bs-placement="top"
title="循环从中心点只缩小，速度快，幅度小">
Pulseshrink
</div>
<div class="item hvr-push" data-bs-toggle="tooltip" data-bs-placement="top" title="缩小然后复原">push</div>
<div class="item hvr-pop" data-bs-toggle="tooltip" data-bs-placement="top" title="放大然后复原">pop</div>
<div class="item hvr-bounce-in" data-bs-toggle="tooltip" data-bs-placement="top" title="逐渐放大(两次)，然后保持最大状态">
bouncein
</div>
<div class="item hvr-bounce-out" data-bs-toggle="tooltip" data-bs-placement="top" title="逐渐缩小(两次),然后保持最小状态">
bounceout
</div>
<div class="item hvr-rotate" data-bs-toggle="tooltip" data-bs-placement="top" title="顺时针旋转一定角度，然后暂定在那个位置">
rotate
</div>
<div class="item hvr-grow-rotate" data-bs-toggle="tooltip" data-bs-placement="top"
title="顺时针旋转一定角度，并且放大，然后暂定在那个位置">
growrotate
</div>
<div class="item hvr-float" data-bs-toggle="tooltip" data-bs-placement="top" title="向上移动一段距离">float</div>
<div class="item hvr-sink" data-bs-toggle="tooltip" data-bs-placement="top" title="向下移动一段距离">sink</div>
<div class="item hvr-bob" data-bs-toggle="tooltip" data-bs-placement="top" title="向上移动一段距离，然后开始循环上下浮动">bob
</div>
<div class="item hvr-hang" data-bs-toggle="tooltip" data-bs-placement="top" title="向下移动一段距离，然后开始循环上下浮动">hang
</div>
<div class="item hvr-skew" data-bs-toggle="tooltip" data-bs-placement="top"
title="由矩形逐渐变为平行四边形(相当于拽着右上和左下拉伸)">
skew</div>
<div class="item hvr-skew-forward" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边向右拉">
skewforward</div>
<div class="item hvr-skew-backward" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边向左拉">
skewbackward</div>
<div class="item hvr-wobble-vertical" data-bs-toggle="tooltip" data-bs-placement="top" title="上下晃动几下后停止">
wobblevertical</div>
<div class="item hvr-wobble-horizontal" data-bs-toggle="tooltip" data-bs-placement="top" title="左右晃动几下后停止">
wobblehorizontal</div>
<div class="item hvr-wobble-to-bottom-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="左上，右下晃动几下后停止">
wobbletobottomright</div>
<div class="item hvr-wobble-to-top-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="右上左下晃动几下后停止">
wobbletotopright</div>
<div class="item hvr-wobble-top" data-bs-toggle="tooltip" data-bs-placement="top" title="底边不动，上边左右晃动几下后停止">
wobbletop
</div>
<div class="item hvr-wobble-bottom" data-bs-toggle="tooltip" data-bs-placement="top" title="上边不动，下边晃动几下后停止">
wobblebottom
</div>
<div class="item hvr-wobble-skew" data-bs-toggle="tooltip" data-bs-placement="top" title="中间不动，上下左右晃动几下后停止">
wobbleskew</div>
<div class="item hvr-buzz" data-bs-toggle="tooltip" data-bs-placement="top" title="小幅度来回摇啊摇，就跟商场的瘦腿机一样">buzz
</div>
<div class="item hvr-forward" data-bs-toggle="tooltip" data-bs-placement="top" title="向右平移一段距离">forward
</div>
<div class="item hvr-buzz-out" data-bs-toggle="tooltip" data-bs-placement="top" title="小幅度来回摇几下停止">buzzout
</div>
<div class="item hvr-backward" data-bs-toggle="tooltip" data-bs-placement="top" title="向左平移一段距离">backward
</div>
</div>
<div class="background">
<h2>背景(跟做ppt切换下一页的动画一样)</h2>
<div class="item1 hvr-fade" data-bs-toggle="tooltip" data-bs-placement="top" title="背景逐渐变为其他颜色">fade
</div>
<div class="item1 hvr-back-pulse" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景逐渐变为其他颜色，并且一闪一闪">
backpulse
</div>
<div class="item1 hvr-sweep-to-bottom" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景从上往下逐渐变为其他颜色">
sweeptobottom
</div>
<div class="item1 hvr-sweep-to-right" data-bs-toggle="tooltip" data-bs-placement="top"
title="背景从左往右逐渐变为其他颜色">
sweeptoright
</div>
Hover.css使用代码
需积分: 0 139 浏览量
更新于2023-05-24
收藏 672KB ZIP 举报
Hover.css是一款强大的CSS库，专为网页设计中的悬停效果而设计。它提供了一系列美观、动态且响应式的悬停效果，使得用户在鼠标指针悬停在元素上时，能够获得丰富的视觉反馈。 Hover.css主要由CSS、LESS和SCSS三种格式的文件组成，分别满足不同的开发需求。
1. **CSS**: CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。在Hover.css中，`.css`文件包含了预编译后的悬停效果样式，可以直接在项目中引用。开发者只需要在HTML元素上添加特定的类名，即可实现各种悬停效果，如淡入淡出、旋转、放大等。
2. **LESS**: LESS是一种CSS预处理器，它扩展了CSS的语法，引入了变量、嵌套规则、运算符和函数等功能，使CSS更易维护和扩展。在Hover.css中，`.less`文件提供了源码，允许开发者根据需要自定义和扩展悬停效果。如果你的项目中已经使用了LESS，可以直接编辑这些文件，然后通过LESS编译器转换为CSS。
3. **SCSS**: SCSS（Sassy CSS）是另一种流行的CSS预处理器，它在LESS的基础上增加了更多特性，如嵌套选择器、变量、混合（mixins）、导入指令等。Hover.css中的`.scss`文件与LESS文件类似，为开发者提供了源代码，便于在使用SASS的项目中定制和整合悬停效果。
在使用Hover.css时，你需要按照以下步骤操作：
1. **引入Hover.css**: 将下载的`hover.css`文件链接到你的HTML文档中，或者将LESS/SCSS文件编译并链接到项目。
```html
<link rel="stylesheet" href="path/to/hover.css">
```
2. **应用悬停效果**: 在需要添加悬停效果的HTML元素上添加相应的类名。例如，如果你想为一个链接应用“grow”效果，可以这样做：
```html
<a href="#" class="hvr-grow">点击我</a>
```
这里，“hvr-grow”是Hover.css中的一个类名，表示悬停时元素会放大。
3. **自定义效果**: 如果你想修改或扩展悬停效果，可以编辑LESS或SCSS源文件，然后重新编译。确保遵循预处理器的语法规则，并理解每个效果的实现原理。
4. **响应式设计**: Hover.css的效果都是响应式的，意味着它们在不同设备和屏幕尺寸下都能正常工作。不过，仍然建议测试并调整效果，以确保在所有目标平台上都能提供良好的用户体验。
5. **浏览器兼容性**: 虽然Hover.css努力实现广泛的浏览器支持，但并非所有效果在所有浏览器中都可用。在选择和使用效果时，应考虑目标用户的浏览器分布和兼容性需求。
通过以上介绍，你应该对Hover.css的使用有了基本的理解。这个库为开发者提供了丰富的悬停效果选项，同时支持LESS和SCSS，增强了CSS的灵活性和可维护性。在实际项目中，合理利用Hover.css可以提升网页的交互性和美观度。
hover.zip （3个子文件） 
hover 
Hover-master.zip 703KB css 
hover.css 112KB
index.html 17KB162 浏览量
2019-07-11 上传
2019-07-11 上传
2021-03-20 上传
2020-12-13 上传
172 浏览量
2019-09-02 上传
165 浏览量
2023-02-24 上传
2016-03-09 上传
2022-08-12 上传
137 浏览量
5星 · 资源好评率100%2022-11-19 上传
2021-10-05 上传
5星 · 资源好评率100%181 浏览量
181 浏览量
119 浏览量
104 浏览量
2022-09-19 上传
2008-11-25 上传
109 浏览量
101 浏览量
5星 · 资源好评率100%196 浏览量
135 浏览量
2020-01-01 上传
2020-09-25 上传
2014-08-08 上传
资源评论
