好玩的前端特效之会动的太极图

话不多说直接上干货
html文件

"en">


    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    "stylesheet" href="./太极.css">



    
"big-box">
        
"content black">
            
"in-circle rect-left">
                
"small-circle left">
            
        
        
"content white">
            
"in-circle rect-right">
                
"small-circle right">
            
        
    

css文件代码

body {
    background-color: rgba(24, 24, 24, 0.6);
}

#big-box {
    width: 400px;
    height: 400px;
    position: relative;
    transform: rotate(45deg);
    animation: ams infinite linear 12s;
    margin: 25% auto;
}

.content {
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px #d2d2d2 solid;
    border-bottom: none;
}

.in-circle {
    width: 200px;
    height: 200px;
    border-radius: 200px;
    position: absolute;
    z-index: 1;
}

.small-circle {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

.black {
    border-radius: 200px 200px 0 0;
    background: white;
}

.rect-left {
    bottom: -100px;
    left: 0;
    background: black;
}

.left {
    background: white;
}

.white {
    border-radius: 0 0 200px 200px;
    background: black;
}

.rect-right {
    bottom: 100px;
    right: 0;
    background: white;
}

.right {
    background: black;
}

@keyframes ams {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

当然,放在一个文件当中也是可以的

    
    
    
    
    



    
"big-box">
        
"content black">
            
"in-circle rect-left">
                
"small-circle left">
            
        
        
"content white">
            
"in-circle rect-right">
                
"small-circle right">