zoukankan html css js c++ java

纯css3实现旋转的太极图

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>css3实现旋转的太极图</title>
    <style>
        body{margin: 0;padding: 0;}
        #container{
            position: relative;
            width: 500px;height: 250px; background: #fff; border-radius: 100%; margin: 100px auto;
            border: 6px solid #000; border-bottom-width: 250px;
            animation:animat 6s linear infinite;
        }
        #container:before,#container:after{
            content: '';
            position: absolute;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            top: 50%;
            border: 90px solid;
        }
        #container:before{
            background: #fff;left: 0;border-color: #000;
        }
        #container:after{
            background: #000;right: 0;border-color: #fff;
        }
        @keyframes animat{
            0%   { transform: rotate(0deg);}
            100% { transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>

没有做浏览器兼容，建议在chrome浏览！

注意：这个效果不是我原创，但是我一个字一个字敲出来的^_^

查看全文

相关阅读:
Beta 第七天
 Beta 第六天
 Beta 第五天
 Beta 第四天
 Beta 第三天
 Beta 第二天
 Beta 凡事预则立
 Beta 第一天
 Beta 集合
 打造专属测试平台5-使用Docker部署MySQL数据库

原文地址：https://www.cnblogs.com/zhangans/p/4864349.html