HTML5+CSS3--制作动画转动特效

HTML5+CSS3制作动画转动特效在本章中，用户可以使用Animations功能，为动画定义多个关键帧并指定每个关键帧中标签的属性值来实现更加复杂的动画效果。在本练习中，将使用Animations功能，制作一个企业首页。帮助用户更好的了解Animations功能的含义和应用。操作步骤：（1）创建页面的页头。页头被放置在DIV层中，使用ul列表为页头添加导航条。divid=menuulliclass=homeahref=scriptlanguage=javascripttype=text/javascriptod_displayImage('myImg1','images/home',80,99,'','VariableOpacityRules');/script/a/liliclass=contact_currentahref=scriptlanguage=javascripttype=text/javascriptod_displayImage('myImg1','images/contact',103,79,'','VariableOpacityRules');/script/a/li/ul/div（2）为页头添加CSS样式，包括导航列表ul和列表项li的样式。#menuul{margin:0px;padding:0px;list-style:none;}#menuli.homea{width:80px;height:99px;float:left;margin:60px000;}（3）为页面添加intro_text层，该层主要存放动画的介绍信息。divid=intro_textdivstyle=width:300px;padding:65px0040px;h2动画介绍/h2p  动画是一种小孩子喜爱的东西，很灵动。英文有：animation、cartoon、animatedcartoon。其中，比较正式的Animation一词源自于拉丁文字根的anima，意思为灵魂；动词animate是赋予生命，引申为使某物活起来的意思。所以animation可以解释为经由创作者的安排，使原本不具生命的东西像获得生命一般的活动.../p/div/div（4）为intro_text层添加CSS样式，包括层的高度或宽度等信息。#intro_text{float:left;width:416px;height:213px;background:url(images/paper.gif)no-repeatcenter;text-align:left;}（5）为页面添加动画特效，该动画放置在container1层中。divid=container1divid=stagedivid=shapeclass=cubebackfacesdivclass=planeone1/divdivclass=planetwo2/divdivclass=planethree3/divdivclass=planefour4/divdivclass=planefive5/divdivclass=planesix6/divdivclass=planeseven7/divdivclass=planeeight8/divdivclass=planenine9/divdivclass=planeten10/divdivclass=planeeleven11/divdivclass=planetwelve12/div/div/div（6）为container1层和stage层添加样式，stage层放在container1层中。#container1{margin-top:20px;margin-left:50px;background-color:#856674;border:none;border-radius:20px;color:white;width:700px;height:380px;-webkit-perspective:800;-webkit-perspective-origin:50%225px;}#shape{position:relative;top:100px;margin:0auto;height:200px;width:200px;-webkit-transform-style:preserve-3d;}（7）为plane添加样式，该层主要用于设置动画中的过渡效果。.plane{position:absolute;height:200px;width:200px;border:1pxsolidwhite;-webkit-border-radius:12px;-webkit-box-sizing:border-box;text-align:center;font-family:Times,serif;font-size:124pt;color:black;background-color:rgba(255,255,255,0.6);-webkit-transition:-webkit-transform2s,opacity2s;-webkit-backface-visibility:hidden;}