两种图片旋转方法

最新推荐文章于 2022-11-17 09:23:47 发布

Casanover

最新推荐文章于 2022-11-17 09:23:47 发布

阅读量1.6k

点赞数

分类专栏： JavaScript css html

本文链接：https://blog.csdn.net/wzj2584454/article/details/74275810

版权

JavaScript 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

两种图片不停旋转的方法

第一种老生常谈canvas

<canvas id="imgId" class="check-status-picture-rotate" width="259px" height="259px">
      </canvas>

js：

$(function () {
    var rotate = document.getElementById("imgId");
    var ctx = rotate.getContext('2d');
    var img = new Image();
    img.src = "../static/img/Cancel_Env_antimation.jpg";
    function rotateStart(){
      var x = rotate.width / 2;
      var y = rotate.height / 2;
      ctx.drawImage(img,0,0);      //意思为从坐标（0,0）开始绘制图片
      ctx.translate(129.5,129.5);  //旋转中心点
      ctx.rotate((Math.PI / 180) * 5);  //旋转角度
      ctx.translate(-x, -y);      
    }
    setInterval(rotateStart,50)   //无限以50毫秒一次频率旋转
  })

测试可实现。

第二种简单得多，纯css方法

这一段写入css：

@keyframes rotate {
   to {
     transform: rotate(360deg);
     -ms-transform: rotate(360deg);    /* IE 9 */
     -webkit-transform: rotate(360deg); /* Safari and Chrome */
     -o-transform: rotate(360deg);     /* Opera */
     -moz-transform: rotate(360deg);       /* Firefox */
   }
 }

这一段写入图片样式class：

.rotate-picture{
  position: absolute;
  top:10px;
  left: 191px;
  animation: rotate 15s linear infinite;
  -moz-animation: rotate 15s linear infinite;    /* Firefox */
  -webkit-animation: rotate 15s linear infinite; /* Safari 和 Chrome */
  -o-animation: rotate 15s linear infinite;  /* Opera */
}

绝对定位因为项目原因添加，不用添加也可以