<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 实现悬停
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ppk谈JavaScript
Peter-Paul Koch / 淘宝UED / 人民邮电出版社 / 2008-4 / 59.00元
本书全方位介绍了JavaScript,主要讨论了浏览器兼容性、可访问性、底层语法以及与HTML结构层的协同等问题。书中既包括理论性的讲解,又给出了相关的示例脚本以进行进一步阐述。通过8个真实项目示例,介绍了JavaScript核心语言、BOM、事件处理、DOM、修改CSS样式表以及数据检索等内容。 本书适合具有一定网页开发经验的Web开发人员阅读。一起来看看 《ppk谈JavaScript》 这本书的介绍吧!