html旋转八卦图代码

宋圣斌 3个月前 43浏览 0评论

HTML旋转八卦图是一种非常流行的网页特效,它能够让网页更加生动和有趣。当然,如果您想要实现这种特效,您需要了解一些基本的HTML知识。下面是一份HTML旋转八卦图代码:

    <html>
    <head>
    <style>
        .container {
            width: 200px;
            height: 200px;
            position: relative;
        }
    
        .rotate-container {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-origin: center center;
            animation: rotate 8s linear infinite;
        }
    
        .yin {
            width: 50%;
            height: 100%;
            background-color: black;
            float: left;
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
        }
    
        .yang {
            width: 50%;
            height: 100%;
            background-color: white;
            float: left;
            border-top-left-radius: 100px;
            border-bottom-left-radius: 100px;
        }
    
        .rotate-yin {
            transform-origin: left center;
            animation: rotateYin 8s linear infinite;
        }
    
        .rotate-yang {
            transform-origin: right center;
            animation: rotateYang 8s linear infinite;
        }
    
        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }
    
        @keyframes rotateYin {
            to {
                transform: rotate(180deg);
            }
        }
    
        @keyframes rotateYang {
            to {
                transform: rotate(-180deg);
            }
        }
    </style>
    </head>
    
    <body>
        <div class="container">
            <div class="rotate-container">
                <div class="yin rotate-yin"></div>
                <div class="yang rotate-yang"></div>
            </div>
        </div>
    </body>
    </html>

您可以将上述代码复制到您的HTML文件中,并通过浏览器查看效果。这段代码基于CSS的动画,通过对容器和内部元素的旋转方式不同的控制,让两个“阴”和“阳”在容器中旋转缓慢的展示,形成了八卦图的效果。

总而言之,HTML旋转八卦图代码是一种非常有趣的特效,可以为您的网页增加生动性。希望上述的代码能够对您有所启发,让您更好的了解HTML动画的设计和实现方法。