zoukankan      html  css  js  c++  java
  • CSS3 实现太极图案

    CSS3实现太极图案

    分析图片组成(如下图所示):

    先给出html代码:

    <div class="box">
            <div class="content">
                <div class="left"></div>
                <div class="right"></div>
                <div class="inner-circle up">
                    <div class="sm-circle circle-white"></div>
                </div>
                <div class="inner-circle down">
                    <div class="sm-circle circle-black"></div>
                </div>
            </div>
        </div>
    View Code

    步骤一:

    先把紫色框出来的两个div修改其样式,使其分别成两个半圆,一黑一白。

    .left{
        position: absolute;
        width: 50%;
        top: 0;
        left:0;
        height: 100%;
        background-color: #000000;
        border-radius: 100% 0 0 100% / 50% 0 0 50%;
    }
    .right{
        position: absolute;
        width: 50%;
        top: 0;
        right: 0;;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    }
    View Code

    步骤二:把外面的红色框添加样式,使其变成圆,一黑一白

    .inner-circle{
        position: absolute;
        width: 50%;
        height: 50%;
        left: 25%;
        border-radius:50% ;
    }
    .up{ 
        top: 0;
        background-color: #000000;
    }
    .down{
        bottom: 0;
        background-color: #FFFFFF;
    }
    View Code

    第三步:给最里面的红色框添加样式,使其变成圆,一黑一白

    .sm-circle{
        position: absolute;
        width: 25%;
        height: 25%;
        top: 37.5%;
        left: 37.5%;
        border-radius: 50%;
    }
    .circle-white{
        background-color: #FFFFFF;
    }
    .circle-black{
        background-color: #000;
    }
    View Code

    最后:给太极图案最外层的div添加动画,使其动起来

    设置动画

    @keyframes Rotate {
        0%{
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    View Code

    给div绑定动画

    .content{
        margin: 0 auto;
        position: relative;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 1px solid #aaa;
        animation: Rotate 6s linear infinite;
    }
    View Code

    好了,旋转的太极就画好了,是不是很简单呀

    运行效果,请点击:http://hjjia.github.io/h5translate3d/taiji/

  • 相关阅读:
    二叉树的遍历(递归,迭代,Morris遍历)
    1003. Emergency
    1002. A+B for Polynomials
    设计模式6——创建型模式之原型模式
    设计模式5——创建型模式之建造者模式
    设计模式4——创建型模式之单例模式
    设计模式3——创建型模式之抽象工厂模式
    设计模式2——创建型模式之工厂方法模式
    设计模式1——创建型模式之简单工厂模式
    设计模式六大原则
  • 原文地址:https://www.cnblogs.com/i-jia/p/5338798.html
Copyright © 2011-2022 走看看