css3实现图形的动画效果

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

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">
</head>
<body>
<div class="contaner">
    <div class="image">

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

原文链接：https://www.f2er.com/css/456809.html

css3实现图形的动画效果

猜你在找的CSS相关文章