纯css3实现的太极八卦并且会转动的css3特效代码下载.

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>纯CSS3实现太极图形样式代码 - 产品大师</title>
<style>
    .square{
        width:400px;height:400px;position:relative; 
        
        transform:rotate(45deg); 
        -webkit-transform:rotate(45deg); 
        -moz-transform:rotate(45deg); 
        
        animation:rotate infinite linear 5s;margin:10% auto;
        -webkit-animation:rotate infinite linear 5s;margin:10% auto;
        -moz-animation:rotate infinite linear 5s;margin:10% auto;
    }
    .rect{width:400px;height:200px;position:relative;border:1px #d2d2d2 solid;border-bottom:none;}
    .inner_circle{width:200px;height:200px;border-radius:200px;position:absolute;z-index:1;}
    .dot{width:50px;height:50px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:50%;}
    .rect_one{border-radius:200px 200px 0 0;background:white;}
    .rect_one_one{bottom:-100px;left:0;background:black;}
    .rect_one_two{background:white;}
    .rect_two{border-radius:0 0 200px 200px;background:black;}
    .rect_two_one{bottom:100px;right:0;background:white;}
    .rect_two_two{background:black;}
    @keyframes rotate{
        from{
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        }to{
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }}
</style>
</head>

<body>

<div class="square">
    <div class="rect rect_one">
        <div class="inner_circle rect_one_one">
            <div class="dot rect_one_two"></div>
        </div>
    </div>
    <div class="rect rect_two">
        <div class="inner_circle rect_two_one">
            <div class="dot rect_two_two"></div>
        </div>
    </div>
</div>
</body>
</html>

截图预览

纯css3实现的太极八卦并且会转动的css3特效代码下载.png

最后编辑:2018年12月17日 ©著作权归作者所有

发表评论

×