码迷,mamicode.com
首页 > 其他好文 > 详细

太极图

时间:2019-10-02 00:59:03      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:alt   图片   ati   position   htm   pre   har   white   src   

<!DOCTYPE HTNL>
<html lang="en">
<html>
<mate charset="utf-8">
<head>
<title></title>
<style>
*{padding:0;
margin:0;}

div{
width:200px;
height:200px;
background-image: linear-gradient(90deg,red 50%,white 50%);

border-radius:50%;
margin:200px auto;
animation:zhuan 2s infinite linear;

}
div:before{
            content:"";
            width: 40px;
            height: 40px;
            background-color: white;
            border:30px solid red;
            position:absolute;
            left:50px;
            border-radius:50%;
            
 
        }
        div:after{
            content:"";
            width: 40px;
            height: 40px;
            background-color:red;
            border:30px solid white;
            position:absolute;
            left:50px;
            top:100px;
            border-radius:50%;
            
            
        }
 @keyframes zhuan{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

</style>
</head>
<body style="background-color:black;">
<div></div>
</body>

技术图片

 

太极图

标签:alt   图片   ati   position   htm   pre   har   white   src   

原文地址:https://www.cnblogs.com/niuyaomin/p/11616356.html

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