快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

利用css3制作旋转动画-创新互联

利用css3功能强大,我们可以直接完成旋转动画的制作,而跳过复杂的javascript。

成都创新互联是一家专注于做网站、网站设计与策划设计,新和网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:新和等地区。新和做网站价格咨询:18982081108

 html代码如下:demo01.html

  
      
          
          旋转动画
          
      
      
          
              
                  
1
                  
2
                  
3
                  
4
                  
5
                  
6
                  
7
                  
8
                  
9
              
          
                  css代码如下:demo01.css   .container{       width:210px;       height:140px;       position:relative;       //3d视距,当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身       perspective:1000px;       margin:50px auto 40px;   }   #around{       width:100%;       height:100%;       //规定如何在 3D 空间中呈现被嵌套的元素       transform-style:preserve-3d;       position:absolute;       //定义动画       animation:myMove 10s infinite;   }   #around figure{       display:block;       position:relative;       width:186px;       height:116px;       left:10px;       top:10px;       border:2px solid black;       text-align:center;       color:white;       font-weight:bold;       //与高度相等,使内容垂直居中显示       line-height:116px;   }   #around figure:nth-child(1){       transform: rotateY(0deg) translateZ(288px);       background-color:red;   }     #around figure:nth-child(2){       transform: rotateY(40deg) translateZ(288px);       background-color:orange;   }     #around figure:nth-child(3){       transform: rotateY(80deg) translateZ(288px);       background-color:yellow;   }     #around figure:nth-child(4){       transform: rotateY(120deg) translateZ(288px);       background-color:green;   }     #around figure:nth-child(5){       transform: rotateY(160deg) translateZ(288px);       background-color:darkgreen;   }     #around figure:nth-child(6){       transform: rotateY(200deg) translateZ(288px);       background-color:blue;   }     #around figure:nth-child(7){       transform: rotateY(240deg) translateZ(288px);       background-color:purple;   }     #around figure:nth-child(8){       transform: rotateY(280deg) translateZ(288px);       background-color:navy;   }    #around figure:nth-child(9){       transform: rotateY(320deg) translateZ(288px);       background-color:pink;   }   #keyframes myMove{     from{       transform: rotateY(360deg);         }     to{      transform: rotateY(0deg);     } }

 完成后的图示如下:

利用css3制作旋转动画

图片可以自动旋转。修改animation属性里的值可以实现无限循环(infinite)和多次循环(ease n).

如:animation:myMove 10s ease 2. myMove为动画函数,10s为完成动画所用时间。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


新闻名称:利用css3制作旋转动画-创新互联
网站URL:http://6mz.cn/article/jgdpp.html

其他资讯