iT邦幫忙

0

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

js

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

1 個回答

4
ccutmis
iT邦高手 9 級 ‧ 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>

/images/emoticon/emoticon12.gif

ccutmis iT邦高手 9 級 ‧ 2018-03-28 11:35:30 檢舉

/images/emoticon/emoticon25.gif

我要發表回答

立即登入回答