<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>annimation动画效果</title>
<style type="text/css">
.annimation{
width: 200px;
height: 200px;
background-color: aquamarine;
animation:xuanz 5s infinite;
opacity: 1;
position: relative;
margin: 0 auto;
margin-top:100px ;
}
@keyframes xuanz{
0%{background-color: white; transform: rotate(20000deg); top: 0; left: 30px; border-radius: 0%;}
25%{background-color: #33B5E5;top: 300px; left: 0; border-radius: 20%;}
50%{background-color: #5F9EA0; top: 0; left: -300px; border-radius: 40%;}
75%{background-color: #7CFC00; top: 0; left: 500px; border-radius: 50%;}
100%{background-color: pink; top: 0; left: 0; border-radius: 0%;}
}
</style>
</head>
<body>
<h1>首先能这篇文章主要是针对annimation动画效果的一个笔记</h1>
<h2>这个动画将实现旋转，移动，变色，变化，等一系列简单的动画</h2>
<hr />
<hr />
<div class="annimation"></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>annimation动画效果</title>
<style type="text/css">
.annimation{
width: 200px;
height: 200px;
background-color: aquamarine;
animation:xuanz 5s infinite;
opacity: 1;
position: relative;
margin: 0 auto;
margin-top:100px ;
}
@keyframes xuanz{
0%{background-color: white; transform: rotate(20000deg); top: 0; left: 30px; border-radius: 0%;}
25%{background-color: #33B5E5;top: 300px; left: 0; border-radius: 20%;}
50%{background-color: #5F9EA0; top: 0; left: -300px; border-radius: 40%;}
75%{background-color: #7CFC00; top: 0; left: 500px; border-radius: 50%;}
100%{background-color: pink; top: 0; left: 0; border-radius: 0%;}
}
</style>
</head>
<body>
<h1>首先能这篇文章主要是针对annimation动画效果的一个笔记</h1>
<h2>这个动画将实现旋转，移动，变色，变化，等一系列简单的动画</h2>
<hr />
<hr />
<div class="annimation"></div>
</body>
</html>
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
