zoukankan      html  css  js  c++  java
  • CSS3绘制旋转的太极图案(一)

     
     

     实现步骤:

    基础HTML:

    <div class="box-taiji">
        <div class="circle-01"></div>
        <div class="circle-02"></div>
    </div>

    步骤一:

     

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}

    画一个宽高为400px的圆,加上阴影。

    步骤二:

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}

    利用伪类实现左右两个半圆,一黑一白。宽为200px,高为400px;

    步骤三:

     

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}
    .circle-01,
    .circle-02 {200px;height:200px;position:absolute;z-index:2;border-radius:300px;}
    .circle-01 {top:0;left:100px;background-color:#000;}

     

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}
    .circle-01,
    .circle-02 {200px;height:200px;position:absolute;z-index:2;border-radius:300px;}
    .circle-01 {top:0;left:100px;background-color:#000;}
    .circle-02 {bottom:0;right:100px;background-color:#fff;}

    依次画两个宽高都为200px的圆,一黑一白。上下定位。

    步骤四:

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}
    .circle-01,
    .circle-02 {200px;height:200px;position:absolute;z-index:2;border-radius:300px;}
    .circle-01 {top:0;left:100px;background-color:#000;}
    .circle-02 {bottom:0;right:100px;background-color:#fff;}
    .circle-01:after,
    .circle-02:after {75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}
    .circle-01:after {top:60px;left:55px;background-color:#fff;}
    .circle-02:after {bottom:60px;right:55px;background-color:#000;}

    组后两个黑白小圆,加上,布局效果搞定。

    步骤五:

    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}
    .circle-01,
    .circle-02 {200px;height:200px;position:absolute;z-index:2;border-radius:300px;}
    .circle-01 {top:0;left:100px;background-color:#000;}
    .circle-02 {bottom:0;right:100px;background-color:#fff;}
    .circle-01:after,
    .circle-02:after {75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}
    .circle-01:after {top:60px;left:55px;background-color:#fff;}
    .circle-02:after {bottom:60px;right:55px;background-color:#000;}
    @keyframes rotation {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }
    @-webkit-keyframes rotation {
        0% {-webkit-transform:rotate(0deg);}
        100% {-webkit-transform:rotate(360deg);}
    }
    @-moz-keyframes rotation {
        0% {-moz-transform:rotate(0deg);}
        100% {-moz-transform:rotate(360deg);}
    }

    添加上动画效果,搞定、收工!!!

    总结:

    1、效果布局主要用了用了3个DIV,配合:before、:after利用css3中的圆角(border-radius)、阴影(box-shadow)完成。

    2、动画效果CSS3中的@keyframes、animation

    完整代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS3绘制旋转的太极图案</title>
    <style>
    body {background-color:#555;}
    .box-taiji {400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8);animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}
    .box-taiji:before,
    .box-taiji:after {200px;height:400px;position:absolute;top:0;display:block;content:"";}
    .box-taiji:before {left:0;border-radius:200px 0 0 200px;background-color:#000;}
    .box-taiji:after {right:0;border-radius:0 200px 200px 0;background-color:#fff;}
    .circle-01,
    .circle-02 {200px;height:200px;position:absolute;z-index:2;border-radius:300px;}
    .circle-01 {top:0;left:100px;background-color:#000;}
    .circle-02 {bottom:0;right:100px;background-color:#fff;}
    .circle-01:after,
    .circle-02:after {75px;height:75px;position:absolute;z-index:3;display:block;content:"";border-radius:75px;}
    .circle-01:after {top:60px;left:55px;background-color:#fff;}
    .circle-02:after {bottom:60px;right:55px;background-color:#000;}
    @keyframes rotation {
        0% {transform:rotate(0deg);}
        100% {transform:rotate(360deg);}
    }
    @-webkit-keyframes rotation {
        0% {-webkit-transform:rotate(0deg);}
        100% {-webkit-transform:rotate(360deg);}
    }
    @-moz-keyframes rotation {
        0% {-moz-transform:rotate(0deg);}
        100% {-moz-transform:rotate(360deg);}
    }
    </style>
    </head>
    
    <body>
    
    
    
    <div class="box-taiji">
        <div class="circle-01"></div>
        <div class="circle-02"></div>
    </div>
    
    
    </body>
    </html>
  • 相关阅读:
    C# int类型的GetProperty的PropertyType返回的是Int32,无法通过typeof(int)或者typeof(Int32)进行比较
    MVC5 Authentication身份认证
    java各个类型判断为空
    table固定列宽,每列超出部分用...代替,鼠标悬停显示全部内容
    web前后台数据交互的四种方式(转)
    List<Map<String,String>>操作(遍历,比较)
    JavaScript实现简单的打印功能
    Expected one result (or null) to be returned by selectOne(), but found: 2
    Eclipse Code Template 设置自动加注释(转)
    highcharts动态获取数据生成图表问题
  • 原文地址:https://www.cnblogs.com/huanlei/p/4028910.html
Copyright © 2011-2022 走看看