码迷,mamicode.com
首页 > Web开发 > 详细

css3实现的4种动画特效按钮

时间:2014-08-21 14:44:44      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   for   ar   

今天要给大家介绍的是css3按钮,里面包含四种特效的动画,如下图:

bubuko.com,布布扣


在线预览    下载源码


实现html代码:

  <div align="center" class="fond">
            <br />
            <div class="bouton_1">
                <a href="#123">
                    <img src="caddie.png" />
                    <span class="texteduboutton_1">Ajouter au panier</span></a>
            </div>
            <br />
            &nbsp;<br />
            <div class="bouton_2">
                <a href="#123">
                    <img src="caddie.png" />
                    <span class="texteduboutton_2">Ajouter au panier</span></a>
            </div>
            <br />
            &nbsp;<br />
            <div class="bouton_3">
                <a href="#123">
                    <img src="caddie.png" />
                    <span class="texteduboutton_3">Ajouter au panier</span></a>
            </div>
            <br />
            &nbsp;<br />
            <div class="bouton_4">
                <a href="#123">
                    <img src="caddie.png" />
                    <span class="texteduboutton_4">Add to cart</span></a>
            </div>
            <br />
            &nbsp;<br />
        </div>

实现的css代码:

.fond{position:fixed;padding-top:px;top:0;left:0; right:0;bottom:0;
  background-image:url(fond_4.jpg);background-size:cover;overflow-y:auto;}

/*///////////////////////////////BOUTON _ 1///////////////////////////////////////*/
.bouton_1{
    width:200px;
    height:40px;
    padding:10px;
    border-radius:40px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -ms-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
}
.bouton_1:hover{
    width:40px;
    height:40px;
    border-radius:40px;
    background-color:#60121C;
}
.texteduboutton_1
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:‘Roboto‘;
    font-weight:300;
    font-size:18px;
}

/*///////////////////////////////BOUTON _ 2///////////////////////////////////////*/
.bouton_2{
    width:200px;
    height:40px;
    padding:10px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.bouton_2:hover{
    width:40px;
    height:40px;
    background-color:#60121C;
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}
.texteduboutton_2
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:‘Roboto‘;
    font-weight:300;
    font-size:18px;
}
/*///////////////////////////////BOUTON _ 3///////////////////////////////////////*/

.bouton_3{
    overflow:hidden;
    width:200px;
    height:40px;
    padding:10px;
    background-color:#CB2025;
}
.bouton_3:hover{
    width:40px;
    height:40px;
    background-color:#60121C;
    -webkit-animation: anim_trois 1.2s;
    -moz-animation: anim_trois 1.2s;
    -ms-animation: anim_trois 1.2s;
    -o-animation: anim_trois 1.2s;
    animation: anim_trois 1.2s;
}
.texteduboutton_3
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:‘Roboto‘;
    font-weight:300;
    font-size:18px;
}
@-webkit-keyframes anim_trois {
    0% {
        width:200px;
        -webkit-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -webkit-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -webkit-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-moz-keyframes anim_trois {
    0% {
        width:200px;
        -moz-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -moz-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -moz-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-ms-keyframes anim_trois {
    0% {
        width:200px;
        -ms-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -ms-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -ms-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@-o-keyframes anim_trois {
    0% {
        width:200px;
        -o-transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        -o-transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        -o-transform: perspective( 600px ) rotateY( 180deg );
    }
}
@keyframes anim_trois {
    0% {
        width:200px;
        transform: perspective( 600px ) rotateY( 0deg );
    }
    50% {
        width:40px;
        height:40px;
        transform: perspective( 600px ) rotateY( 0deg );
    }
    100% {
        width:40px;
        height:40px;
        background-color:#60121C;
        transform: perspective( 600px ) rotateY( 180deg );
    }
}


/*///////////////////////////////BOUTON _ 4///////////////////////////////////////*/
.bouton_4{
    width:40px;
    height:40px;
    padding:10px;
    border-radius:40px;
    background-color:#CB2025;
    overflow:hidden;
    -webkit-transition:all 0.2s ease-in;
    -moz-transition:all 0.2s ease-in;
    -ms-transition:all 0.2s ease-in;
    -o-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
}
.bouton_4:hover{
    width:200px;
    height:40px;
    border-radius:40px;
    background-color:#97bf0d;
}
.texteduboutton_4
{
    width:70%;
    padding-right: 10px;
    float:right;
    line-height:40px;
    color:#ffffff;
    font-family:‘Roboto‘;
    font-weight:300;
    font-size:18px;
}

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/4762

css3实现的4种动画特效按钮,布布扣,bubuko.com

css3实现的4种动画特效按钮

标签:style   blog   http   color   os   io   for   ar   

原文地址:http://www.cnblogs.com/liaohuolin/p/3926987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!