练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.loader-inner{
width: 200px;
height: 200px;
background: pink;
margin: auto;
}
.loader-inner div{
width: 20px;
height:20px;
background: #fff;
border-radius: 50%;
float: left;
margin-right: 30px;
animation: play 0.75s linear infinite;
animation-fill-mode: both
}
.loader-inner div:nth-child(1){
animation-delay: 0.12;
}
.loader-inner div:nth-child(2){
animation-delay: 0.24s;
}
.loader-inner div:nth-child(3){
animation-delay: 0.36s;
}
@keyframes play{
0%{transform: scale(1);opacity: 1;}
50%{transform: scale(0.1);opacity: 0.7;}
100%{transform: scale(1);opacity: 1;}
}
</style>
</head>
<body>
<div class="loader-inner">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
摩天轮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding:0;}
html,body{
height: 100%;
}
body{
background: url(img/2.jpg) no-repeat;
background-size: cover;
position:relative;
}
.box,.content{
width:768px;
height:768px;
position: absolute;
top:0;
left:0;
left:0;
right:0;
margin:auto;
}
.img1{
position: absolute;
top:50%;
left:0;
right:0;
margin:auto;
}
.img2,.img3{
position: absolute;
top:0;bottom:0;
left:0;right:0;
margin:auto;
}
.content img{
position: absolute;
animation: xiaoren 15s linear infinite;
}
.content img:nth-child(1){
top:0;
left:0;
right:0;
margin:auto;
}
.content img:nth-child(2){
bottom:0;
left:0;
right:0;
margin:auto;
}
.content img:nth-child(3){
bottom:0;
left:0;
top:0;
margin:auto;
}
.content img:nth-child(4){
bottom:0;
right:0;
top:0;
margin:auto;
}
.content img:nth-child(5){
top:70px;
left:70px;
}
.content img:nth-child(6){
top:70px;
right:70px;
}
.content img:nth-child(7){
bottom:70px;
right:70px;
}
.content img:nth-child(8){
bottom:70px;
left:70px;
}
.img2{
animation: lunzi 15s linear infinite;
}
.content{
animation: lunzi 15s linear infinite;
}
@keyframes lunzi{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(360deg);}
}
@keyframes xiaoren{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(-360deg);}
}
</style>
</head>
<body>
<div class="box">
<img class="img1" src="img/bracket.png" alt="" />
<img class="img2" src="img/fsw.png" alt="" />
<img class="img3" src="img/big-title.png" alt="" />
<div class="content">
<img src="img/boy.png" alt="" />
<img src="img/dog.png" alt="" />
<img src="img/girl.png" alt="" />
<img src="img/girls.png" alt="" />
<img src="img/hairboy.png" alt="" />
<img src="img/mudog.png" alt="" />
<img src="img/shamegirl.png" alt="" />
<img src="img/mimi.png" alt="" />
</div>
</div>
</body>
</html>
会跳的小女孩
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 100%;
width: 100%;
}
.box{
width: 180px;
height: 300px;
background:url(img/charector.png) no-repeat;
animation: play 1.5s step-start infinite;
}
@keyframes play{
0%{background-position:0 0;}
16.67%{background-position:-180px 0;}
33%{background-position:-360px 0;}
50%{background-position:-540px 0;}
66.67%{background-position:-720px 0;}
84%{background-position:-900px 0;}
100%{background-position:-1080px 0;}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
刷新圈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 刷新</title>
<style type="text/css">
*{margin: 0;padding:0;}
.box{
width: 100px;
height:100px;
position: relative;
margin: 50px auto;
}
.box div{
width: 100px;
height:100px;
position: absolute;
top: 0;
left:0;
}
.box span{
display: block;
width: 10px;
height:10px;
background: #000;
border-radius: 50%;
position: absolute;
animation: play 1s linear infinite;
}
.content1 span:nth-child(1){
top:0;
left: 0;
animation-delay: 0;
}
.content1 span:nth-child(2){
top:0;
right: 0;
animation-delay: 0.2s;
}
.content1 span:nth-child(3){
bottom:0;
right: 0;
animation-delay: 0.4s;
}
.content1 span:nth-child(4){
bottom:0;
left: 0;
animation-delay: 0.6s;
}
.content2{
transform: rotate(45deg);
}
.content2 span:nth-child(1){
top:0;
left: 0;
animation-delay: 0.1s;
}
.content2 span:nth-child(2){
top:0;
right: 0;
animation-delay: 0.3s;
}
.content2 span:nth-child(3){
bottom:0;
right: 0;
animation-delay: 0.5s;
}
.content2 span:nth-child(4){
bottom:0;
left: 0;
animation-delay: 0.7s;
}
@keyframes play{
0%{transform: scale(1);opacity: 1;}
50%{transform: scale(0);opacity: 0;}
100%{transform: scale(1);opacity: 1;}
}
</style>
</head>
<body>
<div class="box">
<div class="content1">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="content2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
