我不懂运营-
一定要用canvas吗？这里给你一个代码，看看能不能参考一下，有必要你模仿着改成canvas咯。
上代码(图片自己找一张)：
<html>
<head>
<style>
#rotate_img {
margin: 100px;
}
</style>
</head>
<body>
<button onclick="rotate()">开始旋转</button>
<button onclick="pause()">暂停旋转</button>
<!--这里自己找张图片，路径写对就行-->
<img src="photo.jpg" id="rotate_img"/>
</body>
</html>
<script>
<!--
var x, n=0, rotINT;
function rotate() {
x = document.getElementById("rotate_img");
clearInterval(rotINT);
rotINT = setInterval("startRotate()",10);
}
function pause () {
clearInterval(rotINT);
}
function startRotate() {
n = n + 1;
x.style.transform = "rotate(" + n + "deg)";
x.style.webkitTransform = "rotate(" + n + "deg)";
x.style.OTransform = "rotate(" + n + "deg)";
x.style.MozTransform = "rotate(" + n + "deg)";
if (n == 180 || n == 360) {
if (n >= 360){
n = 0;
}
}
}
//-->
</script>
黑桃云-
* 回复内容中包含的链接未经审核，可能存在风险，暂不予完整展示！<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script type="text/javascript">
function fly(){
var myImage=document.getElementById("myCanvas");
var cxt = myImage.getContext("2d");
var img = new Image();
img.src="http://www.b***.com/img/bd_logo1.png";
//执行旋转的特效
function spfly(){
cxt.drawImage(img,400,700);
cxt.translate(-80,60); //中心点
cxt.rotate(-0.1);
//clearInterval(timer);
}
var timer =setInterval(spfly,60);
}
</script>
</head>
<body >
<section >
<button onClick=" fly();">开始</button>
<canvas id="myCanvas" width="1300" height="1000">
</canvas>
<section>
</body>
</html>
这样就可以了
document.getElementByIdx_x_x 是自定义方法
改成js的document.getElementById就好了
然后图片路径也要对
S笔记-
你只要将div换成img就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: yellow;
animation:myfirst 5s linear 2s infinite alternate;
-webkit-animation:myfirst 5s linear 0s infinite normal;
-moz-animation: myfirst 5s linear 0s infinite normal;
-o-animation: myfirst 5s linear 0s infinite normal;
}
@keyframes myfirst{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div style=""></div>
</body>
</html>