css3动画
2017-09-04 本文已影响0人
兔小花
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.den{
width: 250px;
height: 250px;
border: 1px solid #999;
margin: 50px;
}
.loading{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
position: relative;
margin: 25px;
color: #999;
border-radius: 50%;
border: 1px solid #ddd;
}
.loading:after{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: -10px;
left: 0;
right: 0;
margin: auto;
background: #ddd;
transform-origin: center 110px;
animation: loading 2s linear infinite;
}
.three,
.two,
.first{
display: inline-block;
opacity:0.5;
animation: jump 1s linear alternate infinite;
}
.two{
animation: jump 2s linear alternate infinite;
}
.three{
animation: jump 3s linear alternate infinite;
}
@keyframes loading {
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
@keyframes jump{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.den2{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 300px;
margin-top: -302px;
position: relative;
}
.list{
position: absolute;
left: 100px;
top: 100px;
}
li{
width: 5px;
height: 30px;
background-color: #84D2FA;
float: left;
list-style: none;
margin: 1px ;
transform-origin: center ;
animation: run 2s alternate infinite;
}
.list>li:nth-child(1)
{
animation-delay: 0.1s;
}
.list>li:nth-child(2)
{
animation-delay: 0.2s;
}
.list>li:nth-child(3)
{
animation-delay: 0.3s;
}
.list>li:nth-child(4)
{
animation-delay: 0.4s;
}
.list>li:nth-child(5)
{
animation-delay: 0.5s;
}
.list>li:nth-child(6)
{
animation-delay: 0.6s;
}
.list>li:nth-child(7)
{
animation-delay: 0.7s;
}
.list>li:nth-child(8)
{
animation-delay: 0.8s;
}
@keyframes run{
0%{
transform : scale(1,1);
}
100%{
transform : scale(1,2);
}
}
.den3{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-top: -252px;
margin-left: 550px;
}
.squale{
width: 150px;
height: 150px;
margin-top: 45px;
margin-left: 45px;
background: #84D2FA;
animation: squl 3s linear infinite;
}
@keyframes squl{
0% {
transform: rotate(0);
}
10%{
transform: rotate(90deg);
border-radius: 50%;
}
25%{
transform: rotate(90deg);
border-radius: 50%;
}
35%{
transform: rotate(180deg);
border-radius: 0;
}
50%{
transform: rotate(180deg);
border-radius: 0;
}
65%{
transform: rotate(270deg);
border-radius: 50%;
}
75%{
transform: rotate(270deg);
border-radius: 50%;
}
85%{
transform: rotate(360deg);
border-radius: 0;
}
100%{
transform: rotate(360deg);
border-radius: 0;
}
}
.den4{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 800px;
margin-top: -252px;
position: relative;
}
.ball{
width: 80px;
height: 80px;
border-radius: 50%;
margin-top: 80px;
margin-left: 80px;
background: radial-gradient(at 20px 20px, #fff, #33CC99);
animation: bounce 0.8s ease-in infinite alternate;
}
.ball2 {
position: absolute;
left: 100px;
bottom: 20px;
width: 40px;
height: 10px;
background: #eee;
border-radius: 50%;
animation: bounce2 0.8s ease-in infinite alternate;
}
@keyframes bounce {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 60px);
}
}
@keyframes bounce2 {
0%{
transform: scale(1);
}
100%{
transform: scale(2);
}
}
.den5{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 50px;
}
.progress{
width: 230px;
height: 40px;
border: 1px solid #33CC99;
margin-left: 10px;
margin-top: 105px;
}
.progress-value{
position: relative;
display: block;
height: 100%;
width: 70%;
background-image: linear-gradient(to right, rgba(51, 204, 153, 0.2), #33CC99);
}
.progress-value:after{
content: '';
position: absolute;
left: 0;
top: 0;
z-index: 2;
height: 100%;
width: 0;
background-image: linear-gradient(to right, rgba(51, 204, 153, 0.2), #33CC99);
animation: progress 1s linear infinite;
}
@keyframes progress{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
.den10,
.den6{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 300px;
margin-top: -252px;
}
.progress2{
width: 230px;
height: 40px;
border: 1px solid #33CC99;
margin-left: 10px;
margin-top: 105px;
}
.progress2:after{
content: '';
display: block;
width: 40px;
height: 40px;
background: #33CC99;
animation: progress2 1s linear alternate infinite;
}
@keyframes progress2{
0%{
transform: translate(0,0);
}
100%{
transform: translate(190px,0);
}
}
.den7{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 551px;
margin-top: -252px;
}
.progress3{
width: 230px;
height: 40px;
border: 1px solid #33CC99;
margin-left: 10px;
margin-top: 105px;
overflow: hidden;
}
.progress3:after{
content: '';
display: block;
width: 40px;
height: 40px;
margin-left: -40px;
background: #33CC99;
animation: progress3 1s linear infinite;
}
@keyframes progress3{
0%{
transform: translate(0,0);
}
100%{
transform: translate(230px,0);
}
}
.den8{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 801px;
margin-top: -252px;
}
.runman{
width: 140px;
height: 140px;
background-image: url("run-man.jpg");
margin-top: 40px;
margin-left: 40px;
animation: runman 1s steps(8) infinite;
}
@keyframes runman{
0%{
background-position: 0,0;
}
100%{
background-position: -1120px,0;
}
}
.den9{
width: 250px;
height: 250px;
border: 1px solid #999;
margin-left: 50px;
}
.eat {
position: relative;
width: 250px;
height: 250px;
}
.eat .head {
position: relative;
margin-right: 20px;
}
.eat .head:before, .eat .head:after {
content: '';
width: 20px;
height: 40px;
background: #33CC99;
border-radius: 40px 0 0 40px;
position: absolute;
margin-top: 110px;
transform-origin: right center;
}
.eat .head:before {
transform: rotate(45deg);
animation: eat1 0.3s linear infinite alternate;
}
.eat .head:after {
transform: rotate(-45deg);
animation: eat2 0.3s linear infinite alternate;
}
.eat .pointer {
overflow: hidden;
margin-left: 20px;
padding-top: 120px;
}
.eat i {
float: left;
width: 16px;
height: 16px;
margin-left: 10px;
border-radius: 50%;
background: #33CC99;
animation: eat 2s linear infinite;
}
.eat i:nth-child(1) {
animation-delay: 0s;
}
.eat i:nth-child(2) {
animation-delay: 0.3s;
}
.eat i:nth-child(3) {
animation-delay: 0.6s;
}
.eat i:nth-child(4) {
animation-delay: 0.9s;
}
@keyframes eat{
0%{
transform: translate(0,0);
opacity: 1;
}
25%{
transform: translate(-60px,0);
opacity: 1;
}
50%{
transform: translate(-120px,0);
opacity: 0;
}
75%{
transform: translate(-60px,0);
opacity: 0;
}
99%{
transform: translate(0,0);
opacity: 0;
}
100%{
transform: translate(0,0);
opacity: 1;
}
}
@keyframes eat1{
100%{
transform: rotate(90deg);
}
}
@keyframes eat2{
100%{
transform: rotate(-90deg);
}
}
.dic{
width: 150px;
height: 100px;
background: #33CC99;
margin-top: 75px;
margin-left: 50px;
animation: shake 0.2s linear infinite;
}
@keyframes shake{
0%{
transform:translate(0,5px);
}
25%{
transform:translate(5px,0);
}
50%{
transform:translate(0,-5px);
}
75%{
transform:translate(-5px,0px);
}
100%{
transform:translate(0,5px);
}
}
</style>
</head>
<body>
<div class="den">
<div class="loading">
loading <div class="first">.</div><div class="two">.</div><div class="three">.</div>
</div>
</div>
<div class="den2">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="den3">
<div class="squale">
</div>
</div>
<div class="den4">
<div class="ball"></div><div class="ball2"></div>
</div>
<div class="den5">
<div class="progress">
<i class="progress-value"></i>
</div>
</div>
<div class="den6">
<div class="progress2">
</div>
</div>
<div class="den7">
<div class="progress3">
</div>
</div>
<div class="den8">
<div class="runman"></div>
</div>
<div class="den9">
<div class="eat">
<div class="head"></div>
<div class="pointer">
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
<div class="den10">
<div class="dic">
</div>
</div>
</body>
</html>
