我要投稿

css3实现图形的动画效果

CSS css

2015-12-14 0 462

css代码：

.image{
    width: 100px;
    height: 100px;
  /*  background-color: forestgreen;*/
    position: relative;
    -webkit-animation: anim 5s;
    -moz-animation: anim 5s;
    -ms-animation: anim 5s;
    -o-animation: anim 5s;
    animation: anim 5s infinite alternate;
    
}

@-webkit-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes anim{
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-ms-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

HTML；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" type="text/css" href="css/style02.css" rel="external nofollow" >
</head>
<body>
<div class="contaner">
    <div class="image">

    </div>
</div>
</body>
</html>

收藏 (0) 点赞 (0)

遇见资源网 css css3实现图形的动画效果 http://www.ox520.com/13905.html