<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 实现悬停
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
REST实战
Jim Webber、Savas Parastatidis、Ian Robinson / 李锟、俞黎敏、马钧、崔毅 / 东南大学出版社 / 2011-10 / 78.00元
为何典型的企业项目无法像你为web所开发的项目那样运行得如此平滑?对于建造分布式和企业级的应用来说,rest架构风格真的提供了一个可行的替代选择吗? 在这本富有洞察力的书中,三位soa专家对于rest进行了讲求实际的解释,并且通过将web的指导原理应用到普通的企业计算问题中,向你展示了如何开发简单的、优雅的分布式超媒体系统。你将会学习到很多技术,并且随着一家典型的公司从最初的小企业逐渐成长为......一起来看看 《REST实战》 这本书的介绍吧!