css3 html5 3D动画练习

来源：互联网发布：windows snmp 软件编辑：程序博客网时间：2024/05/17 21:41
<!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>
0 0