原生js制作旋转花瓣效果

学开发前端好还是后端好 软件开发前端知识视频 前端开发工作一年面试经验

html 代码

<!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>前端开发需要掌握的js</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>

web前端开发面试上机 前端开发需要学的英文 web前端开发html教学视频

» 本文来自:前端开发者 » 《原生js制作旋转花瓣效果》
» 本文链接地址:https://www.rokub.com/5353.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!