練習(xí)
<!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>
會(huì)跳的小女孩
<!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>
