zoukankan      html  css  js  c++  java
  • HTML加CSS3太极图demo

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <style type="text/css">
            .wrapper {
                width: 300px;
                height: 300px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                animation: move 10s infinite linear;
                /*border: 1px solid red;*/
            }
            
            @keyframes move {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
            
            .circleFB {
                width: 300px;
                height: 300px;
                background-color: #000000;
                position: absolute;
                top: 0;
                border-radius: 50%;
            }
            
            .circleSB {
                width: 150px;
                height: 300px;
                background-color: white;
                border-radius: 0 150px 150px 0;
                position: absolute;
                top: 0;
                right: 0;
            }
            
            .circleFB1 {
                width: 150px;
                height: 150px;
                background-color: #000000;
                border-radius: 50%;
                position: absolute;
                left: 75px;
            }
            
            .circleFB2 {
                width: 150px;
                height: 150px;
                background-color: white;
                border-radius: 50%;
                position: absolute;
                left: 75px;
                bottom: 0px;
            }
            
            #samllW {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: white;
                position: absolute;
                left: 55px;
                top: 55px;
            }
            
            #samllB {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #000000;
                position: absolute;
                left: 55px;
                bottom: 55px;
            }
        </style>
    
        <body>
            <div class="wrapper">
                <div class="circleFB"></div>
                <div class="circleSB"></div>
                <div class="circleFB1">
                    <div id="samllW"></div>
                </div>
                <div class="circleFB2">
                    <div id="samllB"></div>
                </div>
    
            </div>
        </body>
    
    </html>

    效果:

  • 相关阅读:
    微信红包开发
    第一次开博客,留此纪念
    数据结构--树(遍历,红黑,B树)
    c++之vector
    动态规划求解最长公共子序列问题
    c++之map
    k-折交叉验证(k-fold crossValidation)
    prim算法
    快速排序算法
    浙大机试题目
  • 原文地址:https://www.cnblogs.com/xiejn/p/11931279.html
Copyright © 2011-2022 走看看