JSFiddle

Question

我需要获得一个JS脚本来使这个中心箭头图像（loading.svg）在连续循环中每0.75秒旋转360度。这是我正在谈论的按钮。

http://royalidea.com/happyname/pending.html

这将是一个班级，以便其中几个图标可以同时旋转 - 一次加载几个项目......

非常感谢任何帮助！

Answer 1

这是一个CSS解决方案，它将每0.75秒旋转360度，延迟为0.75秒。如果您希望延迟更长或更短，只需使用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);
  }
}

JS小提琴：http://jsfiddle.net/3na66ug3/

Answer 2

这是CSS答案：

JSFIDDLE

.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);
    }
}

Answer 3

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/

Answer 4

我建议使用动画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

Answer 5

您可以使用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;
}

jsFiddle Demo

Answer 6

我很喜欢这个教程，只针对CSS解决方案：http://www.andreaverlicchi.eu/css-3-only-spinning-loading-animation/#.VAX3qmTt9VQ

Answer 7

这里是一个带有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);
    }
}

在Loop JS上每隔0.75秒旋转360°图像

7 个答案:

JSFiddle