首页 > 代码库 > css3 html5 3D动画练习

css3 html5 3D动画练习

2024-10-30 20:26:01   205人阅读


<!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动画练习


联系
我们