用于旋转图像的CSS3动画，参数由javascript控制

CSS3 animation for rotation of an image, with parameters controlled by javascript

本文关键字：参数 javascript 控制 动画 旋转 图像 CSS3 用于      更新时间：2023-09-26

我想持续有效地旋转图像-它必须在移动浏览器上顺利工作。我目前使用CSS3动画。我希望能够使用javascript控制CSS功能(开始，停止，设置旋转速度，放松额外学分)。这是我目前所做的旋转本身。JS。

谢谢!

HTML: 

<img class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">
CSS: 

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JS:待办事项

Rotate = {
  speed: 4,
  start: function () {
  },
  stop: function () {
  },
  setSpeed: function () {
  },
  setEasing: function () {
  }
};

CSS3动画功能可以由javascript操纵，根据你的问题，代码将是这样的。

    start: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'running';
    },
    stop: function () {
        var elem = document.getElementById('elementId');
        elem.style.animationPlayState = 'paused';
    },
    setSpeed: function (newSpeed) {
        var elem = document.getElementById('elementId');
        elem.style.animationDuration= newSpeed;
    },
    setEasing: function (newEasing) {
        var elem = document.getElementById('elementId');
        //whatever you want to change
    }


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      -webkit-animation: spin 4s linear infinite;
      -moz-animation: spin 4s linear infinite;
      animation: spin 4s linear infinite;
    }
    @-moz-keyframes spin {
      100% {
        -moz-transform: rotate(360deg);
      }
    }
    @-webkit-keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
      }
    }
    @keyframes spin {
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <img id="theImage" class="image" src="https://brainful.s3.amazonaws.com/assets/images/twoStates/circle.png" alt="">
  <button onclick="Rotate.start()">Start</button>
  <button onclick="Rotate.stop()">Stop</button>
  <button onclick="Rotate.setSpeed('1s')">Speed</button>
  <button onclick="Rotate.setEasing()">Earsing</button>
  <script>
    Rotate = {
      speed: 4,
      start: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'running';
      },
      stop: function() {
        var elem = document.getElementById('theImage');
        elem.style.animationPlayState = 'paused';
      },
      setSpeed: function(newSpeed) {
        var elem = document.getElementById('theImage');
        elem.style.animationDuration = newSpeed;
      },
      setEasing: function(newEasing) {
        var elem = document.getElementById('theImage');
        //whatever you want to change
      }
    };
  </script>
</body>
</html>

相关文章：