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
  • 相关阅读:
    struts2学习笔记(二)
    struts2学习问题(一)
    struts2学习(一)
    给 ecplise 配置struts2配置环境
    Servlet的生命周期
    奇数位丢弃
    快速排序和归并排序(C语言)
    学习正则表达式及c#应用
    C#string与stringBuilder的区别
    c#之字符串函数
  • 原文地址:https://www.cnblogs.com/dken/p/11511205.html
Copyright © 2011-2022 走看看