【技术控】 如何做按钮小动画？HTML+CSS3

当在做网站前端的时候，如何利用HTML+CSS3 做按钮小动画，下面的案例大家可以试试，附源代码！

按钮，宽：200，高：45，背景颜色：浅蓝 #b9ccd2 如下图：



当鼠标移动到按钮上，触发动画效果，形成深灰色圆圈向外扩展。如下图：



按钮的大小和颜色可以根据实际情况调整。

例如：把按钮改成，宽：300，高：80，背景颜色：浅绿 #9ef271



代码修改，如下图:



按钮小动画案例的源代码：

<div class="set hoverable">
<div class="anim"></div>
<span>flash</span>
</div>

<style type="text/css">
.set{
position: relative;
font-weight: 400;
text-align: center;
width: 200px;
line-height: 45px;
overflow: hidden;
position: relative;
z-index: 0;
color: #FFFFFF;
background: #b9ccd2;
cursor: pointer;
}
.anim{
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
position: absolute;
top: 50%;
left: 50%;
z-index: -1;}
.anim:before {
position: relative;
content: '';
display: block;
margin-top: 100%;
background: #6CB1FF;
}

.anim:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
}
.hoverable:hover > .anim:after {
-webkit-animation: anim-out-pseudo 0.75s;
animation: anim-out-pseudo 0.75s;
}
.set:hover>.anim{
-webkit-animation: anim-out 0.75s;
animation: anim-out 0.75s;}
@-webkit-keyframes anim-out-pseudo {
0% {
background: rgba(0, 0, 0, 0.25);
}
100% {
background: transparent;
}
}
@-webkit-keyframes anim-out{
0% {width: 0%;}
100%{width: 100%;}
}
</style>

更多内容，请查看全文>>