纯css3实现旋转的太极图

效果图：

11111

 

在线演示地址：纯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浏览！

 

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

posted @ 2015-10-09 16:30  GangZhan  阅读(714)  评论(0)  编辑  收藏  举报