1
每0.75秒我需要獲得一個JS腳本獲取此中心箭頭圖像（loading.svg），以在連續的循環旋轉每0.75秒360度。這是我正在談論的按鈕。旋轉圖像360°上環路JS
http://royalidea.com/happyname/pending.html
這將一直是一個類，這樣一些的這些圖標可以同時轉動 - 在多個時間加載項...
任何幫助，將不勝感激！
A
回答
1
下面是CSS的答案：
.loading_arrow {
width: 32px;
margin-top: 13px;
margin-left: 42%;
-webkit-animation: rotation .75s infinite linear;
-moz-animation: rotation .75s infinite linear;
-o-animation: rotation .75s infinite linear;
animation: rotation .75s infinite linear;
}
body {
background-color:#000;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
+1
不錯！工作很好。 – Collarbone 2014-09-02 17:24:41
+0
http://royalidea.com/happyname/pending.html – Collarbone 2014-09-02 17:24:59
0
HTML：
<!DOCTYPE html>
<html style="-webkit-overflow-scrolling: touch;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rotate HTML elements by mouse in JavaScript - Propeller.js</title>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
<link rel="stylesheet" href="example/css/turbine.css">
</head>
<body>
<img id="turbine" src="example/img/turbine.png" onmousedown="showLibraryInfo()" ontouchstart="showLibraryInfo()">
<div class="arrow">
<img src="example/img/arrow.png">
<p>
Drag or swipe propeller
</p>
</div>
<script src="src/propeller.js"></script>
<script>
new Propeller(document.getElementById('turbine'), {inertia: 0.99});
function showLibraryInfo() {
if (window.libInfoShown !== true) {
var windStuff = document.getElementsByClassName('wind');
var libStuff = document.getElementsByClassName('propeller');
for (var i = 0; i < windStuff.length; i++) {
var obj = windStuff[i];
obj.style.display = 'none';
}
for (var i = 0; i < libStuff.length; i++) {
var obj = libStuff[i];
obj.style.display = 'inline-block';
}
window.libInfoShown = true;
}
}
</script>
</body>
</html>
CSS：
body, html {
background-color: #2d2d2d;
width: 100%;
height: 100%;
font-size:0.8em;
font-family: "Helvetica Neue", "Helvetica", "Arial";
color: #ffffff;
}
#turbine {
width: 70%;
height: auto;
position: absolute;
left: 5%;
z-index: 99;
}
.turbine {
width: 100%;
height: auto;
}
.arrow {
position: relative;
top: 5%;
left: 5%;
width: 70%;
}
演示：http://pixelscommander.com/polygon/propeller/example/jquerygrid.html#.VAX2ASiaWJI
來源：http://www.techrecite.com/rotate-image-photo-or-object-around-its-axis-using-javascript-animation/
0
我會建議使用GIF動畫，以及，但是，你可以做到這一點像這樣的JS：
$(function() {
var loading = $('.loading_arrow'),
degree = 0,
timer;
function rotate() {
loading.css({ transform: 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
++degree;
rotate();
},5); //lower this to increase speed
}
rotate();
});
JSFiddle
+0
這似乎很適合旋轉動畫，但我怎樣才能讓它更快？看到這裏： http://royalidea.com/happyname/ 箭頭旋轉的速度設置爲0，但有什麼辦法讓它更快？ – Collarbone 2014-09-02 17:16:44
+0
目前，每次只增加1，爲了使其旋轉得更快，您可以通過將'++ degree;'改爲'degree = degree + 5; '或者任何你想讓它增加的東西。 – APAD1 2014-09-02 18:46:02
1
這裏有一個CSS解決方案，可紡360deg每0.75s與0.75s延遲。如果您希望延遲時間更長或更短，只需使用50%, 100%的50％部分並相應地調整animation時間。
img.loading_arrow {
-webkit-animation: spin_delay 1.5s linear infinite;
animation: spin_delay 1.5s linear infinite;
}
@-webkit-keyframes spin_delay {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
50%, 100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes spin_delay {
0% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
50%, 100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
-ms-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
+0
如果你不想延遲，只需從兩個關鍵幀中刪除'50％'，並降低時間。 （[fiddle]（http://jsfiddle.net/3na66ug3/1/）） – 2014-09-02 17:08:12
+0
不錯。那麼通過將以上代碼添加到style.css文件中，圖標是否會生成動畫？ – Collarbone 2014-09-02 17:18:49
0
你可以用CSS動畫做到這一點：
@-webkit-keyframes loader {
from {-webkit-transform: rotate(0);}
to {-webkit-transform: rotate(-360deg);}
}
@keyframes loader {
from {transform: rotate(0);}
to {transform: rotate(-360deg);}
}
img {
width: 32px;
height: 32px;
-webkit-animation: loader 1s infinite linear;
animation: loader 1s infinite linear;
}
0
0
下面是用的jsfiddle演示這裏純CSS解決方案：http://jsfiddle.net/cay3j79t/2/
HTML
<div class="container">
<img class="loading" src="http://royalidea.com/happyname/img/loading.svg">
</div>
CSS
.container {
background-color: blue;
}
.loading {
-webkit-animation: cycle 0.75s infinite linear;
animation: cycle 0.75s infinite linear;
}
@-webkit-keyframes cycle {
from {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes cycle {
from {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
相關問題
- 1. 360度後停止圖像旋轉
- 2. IOS/Objective-C：360圖像旋轉問題
- 3. 快速圖像旋轉360度
- 4. 旋轉Xamarin形式的360度圖像
- 5. java腳本360圖像旋轉代碼減慢旋轉
- 6. JS drawImage旋轉圖像
- 7. 如何在javascript中旋轉圖像（360度上下）
- 8. CATransform3DRotate旋轉360度
- 9. 360度旋轉3
- 10. CSS旋轉360度
- 11. 在JavaScript中旋轉360度視圖
- 12. UIView的旋轉360°永遠
- 13. 360旋轉關閉設置
- 14. 360度旋轉在ActionScript
- 15. 東西關於div和圖像旋轉360度由jquery
- 16. 如何在iPhone中旋轉QTVR圖像360度？
- 17. 如何使用iPhone SDK無限旋轉圖像360度？
- 18. 有趣的輪盤橢圓圖像旋轉（不是360）
- 19. 打通360度旋轉點雲和圖像處理
- 20. 圖像上的3D旋轉
- 21. JS畫布圖像旋轉onload
- 22. - 旋轉圖像
- 23. 旋轉圖像
- 24. 旋轉圖像
- 25. 旋轉圖像
- 26. 旋轉圖像
- 27. jQuery - 旋轉圖像
- 28. javascript旋轉圖像
- 29. UIImageView旋轉圖像
- 30. c＃圖像旋轉
爲什麼不動畫gif？我認爲這是佔位符，而圖像加載，是嗎？ – 2014-09-02 16:46:33
當我們運行腳本並將數據拉入頁面時，它是一個填充按鈕。 – Collarbone 2014-09-02 17:00:39