您的位置 首页 css教程

css如何实现下划线滑动效果

本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。

实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果。

x轴由内向外展开

05d90f3561df177adfc2def0b0ece12.png

利用贝塞尔曲线利用横线的动画实现,具体代码如下:

ul {  display: flex;  padding: 0;  margin: 0;  list-style-type: none;}ul:hover li:not(:hover) a {  opacity: 0.2;}ul li {  position: relative;  padding: 30px 25px 30px 25px;  cursor: pointer;}ul li::after {  position: absolute;  content: "";  top: 100%;  left: 0;  width: 100%;  height: 2px;  background: #3498db;  transform: scaleX(0);  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}ul li:hover::after, ul li.active::after {  transform: scaleX(1);}

文章来源:火云技术网

文章标题:css如何实现下划线滑动效果

文章地址:https://www.pyhw.net/30438_css%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e4%b8%8b%e5%88%92%e7%ba%bf%e6%bb%91%e5%8a%a8%e6%95%88%e6%9e%9c-2.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图