zoukankan      html  css  js  c++  java
  • html5+css3画太极并添加动画效果

    可兼容移动端视图

    效果图如下:太极图是可以旋转的

    具体实现如下:

    <!DOCTYPE html>
    <html lang="zh">
    
    <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>八卦</title>
        <style>
            body{
                background: #eee;
            }
            * {
                box-sizing: border-box;
                padding: 0%;
                margin:0%;
            }
            @keyframes x{
                from{
                    transform: rotate(0deg);
                }
                to{
                    transform: rotate(360deg);
                }
            }
    
            #bagua {
                width: 400px;
                height: 400px;
                /* border: 1px solid red; */
                border-radius: 300px;
                position: relative;
                overflow: hidden;
                animation: x 5s infinite linear;
                box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);
            }
            @media (max- 500px){
                #bagua {
                width: 200px;
                height: 200px;
                /* border: 1px solid red; */
                border-radius: 300px;
                position: relative;
                overflow: hidden;
                animation: x 5s infinite linear;
                box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.75);
            }
            }
    
            #bagua>div:first-child {
                /* border: 10px solid green; */
                width: 50%;
                height: 100%;
                position: absolute;
                left: 0;
                background: black;
            }
    
            #bagua>div:nth-child(2) {
                /* border: 10px solid blue; */
                width: 50%;
                height: 100%;
                position: absolute;
                right: 0;
                background: white;
            }
            #bagua>div:nth-child(3){
                /* border: 10px solid yellow; */
                position: absolute;
                width: 50%;
                height: 50%;
                left:50%;
                margin-left: -25%;
                background: black;
                border-radius: 50%;
            }
            #bagua>div:nth-child(4){
                /* border: 10px solid red; */
                position: absolute;
                width: 50%;
                height: 50%;
                left:50%;
                bottom: 0;
                margin-left: -25%;
                background: white;
                border-radius: 50%;
            }
            #bagua>div:nth-child(5){
                /* border: 10px solid red; */
                position: absolute;
                width: 12.5%;
                height: 12.5%;
                left:50%;
                top:18.5%;
                margin-left: -6.25%;
                background: white;
                border-radius: 50%;
            }
            #bagua>div:nth-child(6){
                /* border: 10px solid red; */
                position: absolute;
                width: 12.5%;
                height: 12.5%;
                left:50%;
                bottom: 18.5%;
                margin-left: -6.25%;
                background: black;
                border-radius: 50%;
            }
            #bagua_wrapper{
                /* border: 1px solid red; */
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
            }
            #bagua_description{
                margin-top: 1em;
                
            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    
    <body>
        <div id="bagua_wrapper">
        <div id="bagua">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="bagua_description">
                <a href="face.html">道可道,非常道</a>
        </div>
        
    </div>
    </body>
    
    </html>
    View Code

    Github链接地址

  • 相关阅读:
    中国剩余定理(SCAUOJ 1077)
    uva 11426 GCD
    LA 4119 Always an integer (数论+模拟)
    uva 12003 Array Transformer (线段树套平衡树)
    uva 10253 Series-Parallel Networks (整数划分+多重集)
    LA 4123 Glenbow Museum
    uva 11361 Investigating Div-Sum Property
    2013多校训练赛第二场 总结
    uva 11174 Stand in a Line (排列组合)
    canvas 画椭圆
  • 原文地址:https://www.cnblogs.com/bestwei/p/12009976.html
Copyright © 2011-2022 走看看