css里的动画animate应用

来源：互联网发布：阿拉伯人性知乎编辑：程序博客网时间：2024/06/06 15:37

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border:15px solid #eee;
border-left-color:pink;
border-bottom-color:pink;
animation: rotate 3s linear 0s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* 网易音乐符 */
.music li {
width: 5px;
height: 50px;
background-color: #000;
list-style: none;
display: inline-block;
}
.wy1 {
animation: scale 1s ease 0.2s infinite;
}
.wy2 {
animation: scale 1s ease 0.4s infinite;
}
.wy3 {
animation: scale 1s ease 0.6s infinite;
}
.wy4 {
animation: scale 1s ease 0.8s infinite;
}
.wy5 {
animation: scale 1s ease 1s infinite;
}
@-webkit-keyframes scale{
from {
transform: scale(0.1);
}
to {
transform: scale(0.5);
}
}

.translate {
position: relative;
}
.translate li {
width: 175px;
height: 173px;
display: inline-block;
list-style: none;
position: absolute;
left: 10px;
}
.img1 {
background: url("iconlist_1.png") 1px;
animation: img1 3s linear 0s 1;
}
.img2 {
background: url("iconlist_1.png") -173px;
animation: img2 3s linear 0s 1;
}
.img3 {
background: url("iconlist_1.png") -347px;
animation: img3 3s linear 0s 1;
}
.img4 {
background: url("iconlist_1.png") -521px;
animation: img4 3s linear 0s 1;
}
.img5 {
background: url("iconlist_1.png") -695px;
animation: img5 3s linear 0s 1;
}
@-webkit-keyframes img1{
from {
transform: translate(0px);
}
to {
transform: translate(200px);
}
}
@-webkit-keyframes img2 {
from {
transform: translate(0px);
}
to {
transform: translate(400px);
}
}
@-webkit-keyframes img3 {
from {
transform: translate(0px);
}
to {
transform: translate(600px);
}
}
@-webkit-keyframes img4 {
from {
transform: translate(0px);
}
to {
transform: translate(800px);
}
}
@-webkit-keyframes img5 {
from {
transform: translate(0px);
}
to {
transform: translate(1000px);
}
}
</style>
</head>
<body>
<div class="circle"></div>

<div class="music">
<ul>
<li class="wy1"></li>
<li class="wy2"></li>
<li class="wy3"></li>
<li class="wy4"></li>
<li class="wy5"></li>
</ul>
</div>

<div class="translate">
<ul>
<li class="img1"></li>
<li class="img2"></li>
<li class="img3"></li>
<li class="img4"></li>
<li class="img5"></li>
</ul>
</div>
</body>
</html>

阅读全文

0 0