js实现太极图高速旋转-Toy模板网

这篇具有很好参考价值的文章主要介绍了js实现太极图高速旋转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>圆</title>
    <style>
        #yuan1 {
            width: 200px;
            height: 400px;
            background-color: black;
            border-radius: 200px 0px 0px 200px;
        }

        #yuan2 {
            width: 200px;
            height: 400px;
            background-color: white;
            border-radius: 0px 200px 200px 0px;
            position: absolute;
            left: 208px;
            top: 0px;
        }

        #wyuan1 {
            width: 200px;
            height: 200px;
            background-color: white;
            border-radius: 100px;
            position: absolute;
            left: 100px;
            bottom: 0px;
        }

        #byuan1 {
            width: 200px;
            height: 200px;
            background-color: black;
            border-radius: 100px;
            position: absolute;
            left: -108px;
            top: 0px;
        }

        #tbyuan {
            width: 50px;
            height: 50px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 200;
        }

        #twyuan {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 300;
        }

        #rotate {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #eee;
        }
        #off ,#on{
            text-align: center;
            margin: 10px 0;
           
        }
        button{
            font-size: 18px;
            background: linear-gradient(90deg, #2875FE 0%, #309CFF 100%);
            color: #fff;
            border: 0;
            padding: 5px 10px;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div id="off" class="off">
        <button>暂停</button>
    </div>
    <div id="on">
        <button>开始</button>
    </div>
    <div class="bg" >
        <div id="rotate">
            <div id="yuan1">
                <div id="wyuan1">
                    <div id="tbyuan"></div>
                </div>
            </div>
            <div id="yuan2">
                <div id="byuan1">
                    <div id="twyuan"></div>
                </div>
            </div>
            
            
        </div>
    </div>
</body>
<script>
    var rotate = document.getElementById('rotate');
    var On = document.getElementById('on');
    var Off  = document.getElementById('off')
    var onft = true;
    var angle = 0;
    var speed = 1;
    var lastTime = 0;
    On.addEventListener('click', function() {
        onft = true;
        requestAnimationFrame(update);
    });
    Off.addEventListener('click', function() {
        onft = false;
        requestAnimationFrame(update);
    });

    function update(time) {
        if (onft) {
            var delta = time - lastTime;
            angle += speed * delta / 16.67; // 16.67ms 是一帧的时间
            rotate.style.transform = 'rotate(' + angle + 'deg)';
            speed += 0.01;
            lastTime = time;
            requestAnimationFrame(update);
        }
    }

    

</script>

</html>