【技术控】 如何做按钮小动画？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>

以上经验分享给大家，欢迎大家一起分享，一起学习，一起进步……码农加油……

获取源代码文档，查看原文>>

转载于:https://my.oschina.net/u/2618825/blog/621201