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
  • 相关阅读:
    freemaker获取字符串长度
    freemarker截取字符串subString
    [转]freemarker中的list
    python常用模块——os模块
    python正则表达式
    需要区分对比的函数以及函数小结
    信道极限容量
    信道和调制
    python中颜色设置
    python中的exec()、eval()以及complie()
  • 原文地址:https://www.cnblogs.com/dken/p/11511205.html
Copyright © 2011-2022 走看看