css3典型动画集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3典型动画集合</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
    <!--边框划过开始-->
    <div id="first" class="div-css3">
        <div class="top common"></div>
        <div class="right common"></div>
        <div class="bottom common"></div>
        <div class="left common"></div>
        <div class="p-text">first over</div>
    </div>
    <!--边框划过结束-->
    <!--边框划过开始-->
    <div id="second" class="div-css3">
        <div class="second-top"></div>
        <div class="second-right"></div>
        <div class="second-bottom"></div>
        <div class="second-left"></div>
        <div class="p-text">sec hover</div>
    </div>
    <!--边框划过结束-->
    <!--边框划过开始-->
    <div id="third" class="div-css3">
        <div class="third-top"></div>
        <div class="third-right"></div>
        <div class="third-bottom"></div>
        <div class="third-left"></div>
        <div class="p-text">third hover</div>
    </div>
    <!--边框划过结束-->
    <!--遮盖层滑过开始-->
    <div id="fourth" class="div-css3">
        <div class="masker fourth-masker"></div>
        <div class="p-text">fourth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="fifth" class="div-css3">
        <div class="masker fifth-masker"></div>
        <div class="p-text">fifth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="sixth" class="div-css3">
        <div class="masker sixth-masker"></div>
        <div class="p-text">sixth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="seventh" class="div-css3" style="background:yellow;">
        <div class="masker seventh-masker"></div>
        <div class="p-text">seventh hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="eighth" class="div-css3" style="background:yellow;">
        <div class="masker eighth-masker"></div>
        <div class="p-text">eighth hover</div>
    </div>
    <!--遮盖层滑过结束-->
    <!--遮盖层滑过开始-->
    <div id="ninth" class="div-css3" >
        <div class="masker ninth-masker"></div>
        <div class="p-text">ninth hover</div>
    </div>
    <!--遮盖层滑过结束-->
</div>
</body>

</html>

style.css

html,body{margin:0px;padding:0px;}
.wrap{
    width: 600px;
    margin:0 auto;
}
.div-css3{
    width:150px;
    height:100px;
    border:1px solid #333;
    background: #333333;
    float: left;
    overflow: hidden;
    position: relative;
    margin: 10px;
}
.p-text{
    position: absolute;
    height: 100px;
    width: 150px;
    text-align: center;
    line-height: 100px;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    text-transform: uppercase;
    z-index: 3;
    letter-spacing: 1px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
/*边框动画1*/
#first .common{
    -webkit-transition: width 0.4s;
    -moz-transition: width 0.4s;
    -ms-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
    background: yellow;
    position: absolute;
}
.top,.bottom{
    height: 1px;
    width:0;
}
.right,.left{
    height:0;
    width: 1px;
}
.top{
    top:0;
    left:0;
}
.right{
    top:0;
    right: 0;
}
.bottom{
    bottom:0;
    right: 0;
}
.left{
    bottom: 0;
    left: 0;
}
#first:hover .top,#first:hover .bottom{
    width: 150px;
}
#first:hover .left,#first:hover .right{
    height: 100px;
}

/*边框动画2*/
.second-top,.second-bottom{
    height: 1px;
    background: yellow;
    width: 140px;
    position: absolute;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.second-top{
    top: 30px;
    left: 5px;
}
.second-bottom{
    bottom: 30px;
    left: 5px;
}
.second-right,.second-left{
    width: 1px;
    height: 70px;
    background: yellow;
    position: absolute;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.second-left{
    left: 20px;
    top: 15px;
}
.second-right{
    right: 20px;
    top: 15px;
}
#second:hover .second-top,#second:hover .second-bottom{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
#second:hover .second-left,#second:hover .second-right{
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}

/*边框动画3*/
.third-top,.third-bottom{
    height:1px;
    background: yellow;
    width:140px;
    position:absolute;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
}
.third-top{
    top:30px;
    left:5px;
    transform:translateX(-150px);
    -moz-transform:translateX(-150px);
    -ms-transform:translateX(-150px);
    -webkit-transform:translateX(-150px);
}
.third-bottom{
    bottom:30px;left:5px;
    transform:translateX(300px);
    -moz-transform:translateX(300px);
    -ms-transform:translateX(300px);
    -webkit-transform:translateX(300px);
}
.third-left,.third-right{
    width:1px;
    height:70px;
    background: yellow;
    position:absolute;
    transition:all 0.4s ease;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
}
.third-right{
    right:20px;
    top:15px;
    transform:translateY(-100px);
    -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
    -webkit-transform:translateY(-100px);
}
.third-left{
    left:20px;
    top:15px;
    transform:translateY(200px);
    -moz-transform:translateY(200px);
    -ms-transform:translateY(200px);
    -webkit-transform:translateY(200px);
}

#third:hover .third-top,#third:hover .third-bottom{
    transform:translateX(0px);
}
#third:hover .third-right,#third:hover .third-left{
    transform:translateY(0px);
}

/*遮罩动画4*/
.masker{position:absolute;background: rgba(240,255,3,0.8);transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;}
.fourth-masker{
    width:200px;
    height:200px;
    margin-left:-100px;
    margin-top:-100px;
    top:50%;left:50%;
    border-radius:50%;
    box-shadow:0 0 20px #ddd;
    transform:scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
}
#fourth:hover .masker{
    transform:scale(1);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
}
/*遮罩动画5*/

.fifth-masker{
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    top: 50%;
    left: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
#fifth:hover .masker{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/*遮罩动画6*/
.sixth-masker{
    width: 0;
    height: 200px;
    -webkit-transition: width 0.4s;
    -moz-transition: width 0.4s;
    -ms-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
}
#sixth:hover .masker{
    width: 150px;
}

/*遮罩动画7*/
.seventh-masker{
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    background: #333333;
    border-radius: 50%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#seventh:hover .masker{
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.eighth-masker{
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    background: #333333;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

#eighth:hover .masker{
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

/*遮罩动画9*/
.ninth-masker{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: yellow;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
#ninth:hover .masker{
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}












阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37631990/article/details/78316616
文章标签: html css css3 动画
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭