qinyi素材网
当前位置: 首页 > HTML5素材 > 11种鼠标滑过特效
  时间: 2021-10-14   阅读:588

插件介绍

这里收集了11中鼠标滑过文字特效的动画效果,但是并不是所有浏览器都支持。可以使用最新版本的浏览器进行测试是否可用。主要是通过css元素的::before和::after伪元素来制作,少数动画效果使用了SVG和HTML5 Canvas制作而成。

简要教程

这里收集了11中鼠标滑过文字特效的动画效果,但是并不是所有浏览器都支持。可以使用最新版本的浏览器进行测试是否可用。主要是通过css元素的::before和::after伪元素来制作,少数动画效果使用了SVG和HTML5 Canvas制作而成。

成品演示

这种酷炫的覆盖效果是通过css元素的::before和::after伪元素来制作。所以的特效都是通过:hover鼠标移动到指定的文字触发的,下面是11种特效之一的“KUKURI”演示效果:

通用css样式

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}

kukuri相关css

.link--kukuri {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #b2b0a9;
}

.link--kukuri:hover {
  color: #b2b0a9;
}

.link--kukuri::after {
  content: '';
  position: absolute;gi
  height: 16px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #F9F9F9;
  transform: translate3d(-100%,0,0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
  transform: translate3d(100%,0,0);
}

.link--kukuri::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
  width: 100%;
}

部分html代码

<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>

更多效果请参考下载的源代码。

上一篇: 下一篇: