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

Rotate image 360° every .75 seconds on Loop JS

本文关键字：JS Loop 上每 75秒 图像 #176 旋转      更新时间：2023-09-26

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

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

这将是一个类，这样这些图标中的几个可以同时旋转——一次加载几个项目。。。

任何帮助都将不胜感激！

这是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);
    }
}

这里有一个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 Fiddle：http://jsfiddle.net/3na66ug3/

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/

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

您可以使用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演示。

这里有一个带有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);
    }
}
相关文章：