码迷,mamicode.com
首页 > Web开发 > 详细

CSS3动画旋转——(图片360°旋转)

时间:2020-07-28 14:44:30      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:init   nsf   ima   line   css3动画   dem   一个   背景图片   webkit   

今天在重构网页特效的时候,想着用到一个css3的旋转特效。简单来一个demo。

html

 <div class="box">
    <img src="./yft.png" alt="" class="rotation">
  </div>

css

  <style>
    @-webkit-keyframes rot {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
    .rotation {
      animation: rot 3s linear infinite;
    }
  </style>

注意的是,建议这里使用的是插入图片,如果用背景图片的话,那么盒子内的内容也会进行旋转。

CSS3动画旋转——(图片360°旋转)

标签:init   nsf   ima   line   css3动画   dem   一个   背景图片   webkit   

原文地址:https://www.cnblogs.com/Bianco/p/13390310.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!