两种图片旋转方法

来源：互联网发布：mac打开exe文件编辑：程序博客网时间：2024/05/09 16:10

两种图片不停旋转的方法

第一种老生常谈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 */}

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

阅读全文

0 0