1、例
<!DOCTYPE html>
<html>
<head>
<title>this is animation</title>
<style type="text/css">
@keyframes topMove{
0%{
transform: rotateZ(0);
}
50%{
transform: rotateZ(45deg);
}
100%{
transform: rotateZ(0);
}
}
@keyframes bottomMove{
0%{
transform: rotateZ(0);
}
50%{
transform: rotateZ(-45deg);
}
100%{
transform: rotateZ(0);
}
}
@keyframes bollMove{
from{
left:260px;
opacity: 0;
}
to{
left:80px;
opacity: 1;
}
}
*{
margin: 0;
padding: 0;
}
.first{
width: 300px;
height: 300px;
background-color: skyblue;
position: relative;
margin: 0 auto;
}
.top{
margin-top: 30px;
margin-left: 40px;
width: 0px;
height: 0px;
border: 40px solid #fff;
border-radius: 50%;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
animation: topMove 2s linear infinite;
}
.bottom{
margin-top: 30px;
margin-left: 40px;
width: 0px;
height: 0px;
border: 40px solid #fff;
border-radius: 50%;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
animation: bottomMove 2s linear infinite;
}
.boll{
width: 30px;
height: 30px;
background-color: #fff;
position: absolute;
left:260px;
margin-top: 55px;
border-radius: 50%;
animation: bollMove .5s linear infinite;
}
</style>
</head>
<body>
<div class="first">
<div class="top"></div>
<div class="bottom"></div>
<div class="boll" style="animation-delay: 0.2"></div>
<div class="boll" style="animation-delay: 0.2"></div>
<div class="boll" style="animation-delay: 0.2"></div>
</div>
</body>
</html>
2、例
<!DOCTYPE html>
<html>
<head>
<title>this is homeword</title>
<style type="text/css">
@keyframes movesecond{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
@keyframes movethird{
0%{
opacity: 0.2;
transform: scaleX(0.5) scaleY(0.5);
}
50%{
opacity: 1;
transform: scaleX(1) scaleY(1);
}
100%{
opacity: 0.2;
transform: scaleX(0.5) scaleY(0.5);
}
}
*{
margin: 0;
padding: 0;
}
.first{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
background-color: skyblue;
}
.first .second{
margin-left: 80px;
margin-top: 80px;
width: 100px;
height: 100px;
border: 10px solid #fff;
background-color: transparent;
border-radius: 50%;
border-top-color: transparent;
border-bottom-color: transparent;
animation:movesecond 2s linear infinite;
position: absolute;
}
.first .third{
width: 0px;
height: 0px;
border: 20px solid #fff;
border-radius: 50%;
position: absolute;
margin-left: 120px;
margin-top: 115px;
animation: movethird 2s linear infinite;
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
3、例
<!DOCTYPE html>
<html>
<head>
<title>this is case2</title>
<style type="text/css">
@keyframes move1{
form{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
*{
margin: 0;
padding: 0;
}
.first{
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
position: relative;
margin: 0 auto;
background-color: skyblue;
}
.first .second{
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid #fff;
border-radius: 50%;
position: absolute;
opacity: 0.5
}
.first .third{
width: 100px;
height: 100px;
background-color: transparent;
border: 10px solid #fff;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
position: absolute;
animation: move1 2s linear infinite;
}
</style>
</head>
<body>
<div class="first">
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
