原生js写的花瓣旋转效果
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- div{ width: 200px; height: 200px; border-radius: 200px 0; background:
- rgba(170, 248, 2, 0.3); position: absolute; top:100px; left: 500px; transform-origin:
- 0 200px; } .box{ transform: rotate(315deg); }
- </style>
- </head>
-
- <body>
- <div class="box">
- </div>
- </body>
- <script src="./tools.js">
- </script>
- <script>
- const box = document.querySelector('.box');
- var timer;
- var begin = 0;
- var duration = 7000;
- var arr = [];
- //点击事件
- box.addEventListener('click',
- function(e) {
- e.preventDefault();
- document.body.innerHTML = '';
- //自动生成24个div
- for (let i = 0; i < 24; i++) {
- var div = document.createElement('div');
- document.body.appendChild(div)
- };
- var starTime = Date.now();
- var change = 360;
- //启动动画帧
- (function aaa() {
- timer = window.requestAnimationFrame(aaa);
- var time = Date.now() - starTime;
-
- //判断运动时间是否超过设定时间
- if (time > duration) {
- time = duration;
- window.cancelAnimationFrame(timer);
- timer = null;
- }
- var currentPos = change / duration * time + begin;
-
- console.log(currentPos);
- //将运动的角度四舍五入
- var num = Math.round(currentPos) if (num % 15 === 0) {
- arr.push(num)
- };
- //将15的倍数储存到arr中 并且去掉重复项
- var arr1 = [];
- for (var i in arr) {
- if (arr1.indexOf(arr[i]) === -1) {
- arr1.push(arr[i])
- }
- }
- console.log(arr1) var divs = document.body.children;
- for (let i = 0; i < divs.length; i++) {
- divs[i].style.transform = `rotate($ {
- currentPos
- }
- deg)`divs[i].style.transform = `rotate($ {
- arr1[i]
- }
- deg)`
- }
- })()
-
- })
- </script>
-
- </html>
来源: http://www.qdfuns.com/notes/48266/8ebe6eef4481350f6c090b64933a5ced.html