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

css 太极图案

时间:2020-01-09 22:46:23      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:round   infinite   css   black   char   order   head   top   pos   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .main{
                position: relative;
                width: 0px;
                height: 200px;
                margin: 50px auto;
                background-color: #00FFFF;
                border-left: 100px solid black;
                border-right: 100px solid white;
                box-shadow: 0 0 50px rgba(0,0,0,0.5);
                border-radius: 50%;
            }
            @keyframes rot{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            .main:hover{
                animation: rot 0.6s linear infinite;
            }
            .main:before{
                content: "";
                position: absolute;
                left: -50px;
                top: 0px;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                box-shadow: 0 100px 0 black;
                background-color: white;
            }
            .main:after{
                content: "";
                position: absolute;
                left: -25px;
                top: 20px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 0 100px 0 white;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div class="main">
        
        </div>
    </body>
</html>

效果图:

技术图片

为.main这个div加上hover伪类,有旋转动画。

css 太极图案

标签:round   infinite   css   black   char   order   head   top   pos   

原文地址:https://www.cnblogs.com/Tisou1/p/12173717.html

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