zoukankan      html  css  js  c++  java
  • 纯css3实现旋转的太极图

    效果图
     
    上代码:
    ------------------------------------------------------------
    <body>
        <div class="div"></div>
        <style>
            body {
                background-color: #aaa;
            }

            .div {
                 400px;
                height: 400px;
                border-radius: 50%;
                border: 1px solid #ddd;
                background-image:
                    radial-gradient(50% 50% at 50% 25%, #000 10%, transparent 0),
                    radial-gradient(50% 50% at 50% 75%, #fff 10%, transparent 0),
                    radial-gradient(50% 50% at 50% 25%, #fff 50%, transparent 0), radial-gradient(50% 50% at 50% 75%, #000 50%, transparent 0),
                    linear-gradient(to left, #fff 50%, #000 50%);
                animation: rotate 3s linear infinite;
            }

            @keyframes rotate {
                from {
                    transform: rotate(0deg)
                }

                to {
                    transform: rotate(359deg)
                }
            }
        </style>
    </body>


    刚刚开始在博客园写正式文章,很多东西正在摸索,样式问题后面再慢慢修改,0.0
  • 相关阅读:
    如何做一名技术管理者
    图表控件amCharts
    Redis
    关于微信,我想说两句
    颜色名称集合
    【翻译】PSV初音Miku Project DIVAf
    【3DS】初音Miku and Future Stars Project
    处女作真人语音计算器上线了
    【PSV】GRAVITY DAZE(重力眩晕)
    看得我老泪横流,自己有多久没有像小女孩这样被惊喜过了?
  • 原文地址:https://www.cnblogs.com/dken/p/11511205.html
Copyright © 2011-2022 走看看