您的位置：首页 > Web前端 > HTML5

css3 html5 3D动画练习

2015-01-10 10:46 633 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css3 3d animation

相关文章推荐

新的分享

章节导航