css3 html5 3D动画练习

浏览数：42 / 时间：2015年06月09日

<!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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css3 html5 3D动画练习