css效果实现一个物体的旋转小demo

最新推荐文章于 2024-04-11 15:13:38 发布

夏侯_瑾轩

最新推荐文章于 2024-04-11 15:13:38 发布

阅读量597

点赞数

分类专栏： html+div+css+javascript+jquery+bootstrap+ajax+json

本文链接：https://blog.csdn.net/baidu_24545901/article/details/78640727

版权

8 篇文章 0 订阅

订阅专栏

  定一个html中的一个元素，然后使用下面的效果即可 

  .img{ 

                  width:200px; 

                  height:200px; 

                  border:100px solid green; 

                  border-left-color: red; 

                  border-right-color: black; 

                  border-top-color: yellow; 

                  margin:100px; 

                  background:url(img/banner_03.png); 

                  -webkit-animation:circle 1s infinite linear;/*匀速 循环*/ 

                  animation:circle 1s infinite linear;/*匀速 循环   这句话和下面的 @keyframe控制的是在ie内核的浏览器下让其能够旋转 */ 

}

             @keyframes circle{ 

                  0%{transform:rotate(0deg);} 

                  100%{transform:rotate(-360deg);} 

}

              @-webkit-keyframes circle{ 

                  0%{transform:rotate(0deg);} 

                  100%{transform:rotate(-360deg);} 

}

  <html> 

  <body> 

 
 <div class=" 
 img"></div> 

  </body> 

  </html> 

关注

专栏目录