CSS太极和动画

作者: 小志1 | 来源:发表于2018-01-08 15:54 被阅读0次

    今天完成一个css太极八卦的css效果,用一个div实现css动画效果,并用before和after伪类来实现。

    分析过程

    首先画一个div
    <div id="taiji"></div>

    #taiji {
        width: 192px;
        height: 96px;
        background: #eee;
        border-color: black;
        border-style: solid;
        border-width: 0px 0px 96px 0px;
        border-radius: 100%;
        position: relative;
    }
    

    其次画出两个伪类

    #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 36px solid black;
        border-radius: 100%;
        width: 24px;
        height: 24px;
    }
    
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: black;
        border: 36px solid #eee;
        border-radius:100%;
        width: 24px;
        height: 24px;
    }
    

    下面是效果图


    css分割.png

    最后将两个div合并成一个div,就可以得到完整的太极了


    完整css.png

    下面我们加点特效,给这个div一个shadow效果和动画效果。
    这就需要box-shadow和keyframes了,box-shadow一共有四个参数,分别:水平距离,竖直距离,模糊程度和颜色,我们只需要模糊程度和颜色,所以前两个参数给0,代码是box-shadow:0 0 1.5em black;;接下来我们在给太极动画效果,代码是animation: roate 10s infinite linear;@keyframes roate {0% {transform: rotateZ(0)}100% {transform: rotateZ(360deg) } }

    最后我们就完成了完整的css太极和动画。


    太极和动画.png

    预览效果:https://xiaozhi1.github.io/css-taiji/

    参考文档

    1.https://css-tricks.com/examples/ShapesOfCSS/
    2.https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
    3.https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
    4.https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

    相关文章

      网友评论

        本文标题:CSS太极和动画

        本文链接:https://www.haomeiwen.com/subject/prebnxtx.html