ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> CSS教程 >> 如何做按钮小动画?HTML+CSS3

如何做按钮小动画?HTML+CSS3

来源:网络整理     时间:2016-02-25     关键词:

本篇文章主要介绍了"如何做按钮小动画?HTML+CSS3",主要涉及到方面的内容,对于CSS教程感兴趣的同学可以参考一下: 当在做网站前端的时候,如何利用HTMLCSS3 做按钮小动画,下面的案例大家可以试试,附源代码!按钮,宽:200,高:45,背景颜色:浅蓝 #b9ccd2 如下...

当在做网站前端的时候,如何利用HTML+CSS3 做按钮小动画,下面的案例大家可以试试,附源代码!
按钮,宽:200,高:45,背景颜色:浅蓝 #b9ccd2 如下图:

如何做按钮小动画?HTML+CSS3 
当鼠标移动到按钮上,触发动画效果,形成深灰色圆圈向外扩展。如下图:
如何做按钮小动画?HTML+CSS3 
按钮的大小和颜色可以根据实际情况调整。
例如:把按钮改成,宽:300,高:80,背景颜色:浅绿 #9ef271

如何做按钮小动画?HTML+CSS3 
代码修改,如下图:
如何做按钮小动画?HTML+CSS3 

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

<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>

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

以上就介绍了如何做按钮小动画?HTML+CSS3,包括了方面的内容,希望对CSS教程有兴趣的朋友有所帮助。

本文网址链接:http://www.codes51.com/article/detail_336915.html

相关图片

相关文章