請問如何用img標籤，配合js作出往螢幕方向多次360度轉動，漸慢到停止效果?

javascript- 2018-03-28 00:05:06 ‧ 4821 瀏覽

分享至

請問如何用img標籤，配合js作出往螢幕方向多次360度轉動，漸慢到停止效果?
小弟只能結案表達謝意

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 2018-03-28 01:14:00

最佳解答

希望有幫助~
Demo:
http://www.web3d.url.tw/hots/imgSpin.htm

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Spin img Demo</title>
<style>
img{}

img.spinLeft{
	-webkit-animation-name: spinL;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinL;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinL;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spinL;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
img.spinRight{
	-webkit-animation-name: spinR;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinR;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinR;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spinR;
    animation-duration: 4000ms;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
}
@-ms-keyframes spinR {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(720deg); }
}
@-moz-keyframes spinR {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(720deg); }
}
@-webkit-keyframes spinR {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(720deg); }
}
@keyframes spinR {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(720deg);
    }
}
@-ms-keyframes spinL {
    from { -ms-transform: rotate(720deg); }
    to { -ms-transform: rotate(0deg); }
}
@-moz-keyframes spinL {
    from { -moz-transform: rotate(720deg); }
    to { -moz-transform: rotate(0deg); }
}
@-webkit-keyframes spinL {
    from { -webkit-transform: rotate(720deg); }
    to { -webkit-transform: rotate(0deg); }
}
@keyframes spinL {
    from {
        transform:rotate(720deg);
    }
    to {
        transform:rotate(0deg);
    }
}

</style>
</head>
<body style="background-color: #333">
<img id="spinImg" src="http://www.web3d.url.tw/hots/images/fakeR1/icon_bear.png"  alt="" />
<button onclick="document.getElementById('spinImg').className='spinLeft';">向左轉</button>
<button onclick="document.getElementById('spinImg').className='spinRight';">向右轉</button>
</body>
</html>