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