您当前的位置:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div{
margin-bottom:10px;
width:200px;
height:100px;
}
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
.div1
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
@keyframs div2{
0% {background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
@-moz-keyframes div2{
0% {background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
.div2{
animation:div2 5s;
}
@keyframes div3{
0% {background: red; left:0px; top:0px;text-shadow:0 0 20px #000;}
25% {background: yellow; left:200px; top:0px;text-shadow:0 0 40px #000;}
50% {background: blue; left:200px; top:200px; text-shadow:0 0 60px #000;}
75% {background: green; left:0px; top:200px;text-shadow:0 0 80px #000}
100% {background: red; left:0px; top:0px; text-shadow:0 0 100px #000}
}
.div3{
animation:div3 5s infinite ease-in;
position:relative;
}
@keyframes div4{
from {
transform: rotate(3deg);
}
20% {
transform: rotate(7deg);
}
60% {
transform: rotate(10deg);
}
80% {
transform: rotate(7deg);
}
to {
transform: rotate(3deg);
}
}
@-webkit-keyframes div4 {
from {
transform: rotate(3deg);
}
20% {
transform: rotate(7deg);
}
60% {
transform: rotate(10deg);
}
80% {
transform: rotate(7deg);
}
to {
transform: rotate(3deg);
}
}
@-moz-keyframes div4 {
from {
transform: rotate(3deg);
}
20% {
transform: rotate(7deg);
}
60% {
transform: rotate(10deg);
}
80% {
transform: rotate(7deg);
}
to {
transform: rotate(3deg);
}
}
.div4{
transform: rotate(3deg);
animation: div4 0.1s 5 ease-in;
}
</style>
<script type="text/javascript"></script>
</HEAD>
<BODY>
<div class="div1">123</div>
<div class="div2">345</div>
<div class="div3">345</div>
<div class="div4">345</div>
</BODY>
</HTML>