码迷,mamicode.com
首页 > Web开发 > 详细

css3制作旋转的太极图

时间:2019-09-12 13:25:11      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:linear   mamicode   col   旋转   慢慢   lin   gradient   css   inf   

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

        .div {
            width: 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(360deg)
            }
        }
    </style>
</body>


刚刚开始在博客园写正式文章,很多东西正在摸索,样式问题后面再慢慢修改,0.0

css3制作旋转的太极图

标签:linear   mamicode   col   旋转   慢慢   lin   gradient   css   inf   

原文地址:https://www.cnblogs.com/dken/p/11511205.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!