html八卦图动态代码

HTML八卦图动态代码是一种在html中制作动画的技巧，其原理是通过CSS3的旋转动画和transform属性来交替展示两个八卦图形成动态效果。

            .yin-yang {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background: black;
                position: relative;
                animation: rotate 3s infinite;
                transform-origin: center;
        }
        .yin-yang:before {
                content: "";
                position: absolute;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: white;
                left: 0;
                top: 0;
        }
        .yin-yang:after {
                content: "";
                position: absolute;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background: black;
                left: 25px;
                top: 0;
        }
        .yin-yang.invert:before {
                background: black;
        }
        .yin-yang.invert:after {
                background: white;
        }
        @keyframes rotate {
            0% {
                    transform: rotate(0);
            }
            50% {
                    transform: rotate(180deg);
            }
            100% {
                    transform: rotate(360deg);
            }
        }
            setInterval(() =>
 {
            const yinYang = document.querySelector(".yin-yang");
            yinYang.classList.toggle("invert");
    }
    , 3000);
    

这段代码中，我们先定义了一个class为yin-yang的div元素，并设置其宽高、边框半径和初始背景。我们还通过position属性设置其上、下旋转的半圆的位置，并设置动画效果。接着我们通过:before和:after伪元素分别在其上、下边圆中间加上白、黑小圆。最后，我们通过@keyframes设置动画的具体效果，在每次动画执行结束后，通过JavaScript中的setInterval方法，通过classList.toggle实现这两个八卦的切换。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！