<a href="#"> Button </a>
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } a { position: relative; padding: 20px 20px 20px 30px; color: #262626; font-size: 24px; font-family: sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: 10px; &:before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: #262626; transform-style: linear; transition-property: height, width; transition-delay: 0.5s, 1s; transition-duration: 0.5s; } &:after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fbff1e; transform: scaleX(0); transition: 0.5s; transition-delay: 0s; transform-origin: right; z-index: -1; } &:hover { &:before { width: 2px; height: 100%; transition-property: width, height; } &:after { transform: scaleX(1); } } }
以上所述就是小编给大家介绍的《鼠标悬停动画效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 大图背景悬停导航菜单
- 图片悬停“滑动打开”动画效果
- 图片不同方向悬停显示不同文字
- 按钮悬停边框和背景动画集合
- 文字悬停下划线动画效果集合
- BannerHoverView - 解耦 TableView Header 实现悬停
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构与算法分析(C++版)(第3版)
Clifford A. Shaffer / 张铭、刘晓丹、等译 / 电子工业出版社 / 2013 / 59.00元
本书采用当前流行的面向对象的C++程序设计语言来描述数据结构和算法, 因为C++语言是程序员最广泛使用的语言。因此, 程序员可以把本书中的许多算法直接应用于将来的实际项目中。尽管数据结构和算法在设计本质上还是很底层的东西, 并不像大型软件工程项目开发那样, 对面向对象方法具有直接的依赖性, 因此有人会认为并不需要采用高层次的面向对象技术来描述底层算法。 但是采用C++语言能更好地体现抽象数据类型的......一起来看看 《数据结构与算法分析(C++版)(第3版)》 这本书的介绍吧!