Hover.css动画库的使用

目录

1、 Hover.css是什么？

2、引入

2.1、整个文件引入

2.2、复制所需要的代码

案例：

1. 卷边效果

2. 调整大小的卷边

类别：

---

1、 Hover.css是什么？

Hover.css是一个CSS3鼠标悬停的动画方案，里面包含了许多纯css写的动画效果

本人写的案例以及Hover.css整个marter文件我上传到本人的资源库里了：https://download.csdn.net/download/m0_46651458/87815483?spm=1001.2014.3001.5503

2、引入

可以将整个hover.css或者hover.min.css引入，也可以找到你想要的效果那段代码复制到你的页面CSS中。

2.1、整个文件引入

<link rel="stylesheet" href="./css/hover.css">

2.2、复制所需要的代码

例如我们需要如下这种效果：

那么我们就可以在hover.css中查到到这段代码，然后将它复制到我们的css中，并且在想要使用这种效果的块级元素上添加类名：`hvr-float-shadow`

<div class="item3 hvr-float-shadow" data-bs-toggle="tooltip" data-bs-placement="top" title="累了，自己看效果吧！">floatshadow</div>

/* Float Shadow */
.hvr-float-shadow {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);position: relative;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;
}.hvr-float-shadow:before {pointer-events: none;position: absolute;z-index: -1;content: "";top: 100%;left: 5%;height: 10px;width: 90%;opacity: 0;background: -webkit-radial-gradient(center,ellipse,rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0) 80%);background: radial-gradient(ellipse at center,rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0) 80%);/* W3C */-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform, opacity;transition-property: transform, opacity;
}.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {-webkit-transform: translateY(-5px);transform: translateY(-5px);/* move the element up by 5px */
}.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {opacity: 1;-webkit-transform: translateY(5px);transform: translateY(5px);/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

如果觉得复制的css效果不符合预期，那么我们可以自己手动改一些参数，使其达到我们的语气，比如阴影的面积太小，我们可以自己调整hvr-float-shadow:before中的width和height。

案例：

1. 卷边效果

2. 调整大小的卷边

3. 边框变化

变化前

变化后

类别：

Hover.css一共分为：2d变幻、背景变化、边框变化、阴影变化、卷边、图标变化和语音气泡。

本人只实践了2d变幻、背景变化、边框变化、阴影变化、卷边。

更多实践参考：Hover.css - A collection of CSS3 powered hover effects

登高壮观天地间，大江茫茫去不还。——杜甫《登高》