css实现一个旋转的八卦图

前言：

昨天在逛知乎是发现了一个外国程序媛的作品，一个旋转的八卦图，挺好玩的，就不要脸的拿过来分享一下。
符知乎地址：https://zhuanlan.zhihu.com/p/27535820
符原文地址：https://css-tricks.com/creating-yin-yang-loaders-web/

正文

要实现旋转的太极八卦，首先是要得到一个静止的八卦图，这个比较简单，很好实现，作者的巧妙之处在于使用伪类元素，HTML标签只有一个。

给HTML标签添加伪类after和before

    .yinyang{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: linear-gradient(to bottom,black 0%,black 50%,white 50%,white 100%);
        display: block;
        box-shadow: 6px 6px 27px 4px rgba(0,0,0,0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .yinyang:after, .yinyang:before{
        content: '';
        display: block; 
        border-radius: 50%;
    }

一个静态的八卦就完成了。

静态的八卦

旋转的话就是给标签和伪类元素加上animation

    .yinyang:after{
        width: 75%;
        height: 75%;
        background: radial-gradient(ellipse at center, black 0%, black 25%, white 25%, white 100%);
        animation: inner-size 3s ease-in-out infinite;
        animation-delay: -1.5s;
    }

    .yinyang:before{
        width: 25%;
        height: 25%;
        background: radial-gradient(ellipse at center, white 0%, white 25%, black 25%, black 100%);
        animation: inner-size 3s ease-in-out infinite;
    }

    @keyframes inner-size {
        0%, 100% {
            width: 75%;
            height: 75%;
        }
            
        50% {
            width: 25%;
            height: 25%;
        }   
    }

    @keyframes rotate {
        to {transform: rotate(-360deg)}
    }

这样，一个旋转的八卦图就完成啦。
原地址
jsbin地址

总结

这个loading动画主要使用到css的animation属性，我特定是总结一下animation属性。

• 定义和用法
  animation 属性是一个简写属性，用于设置六个动画属性：
  animation-name
  animation-duration
  animation-timing-function
  animation-delay
  animation-iteration-count
  animation-direction
  注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

图片来自W3school

什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

范例：

@keyframes myfirst {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
    }

下面的表格列出了 @keyframes 规则和所有动画属性：

图片来自W3school

animation-name: myfirst;//动画名称
animation-duration: 5s;//动画持续时间
animation-timing-function: linear;//动画速度曲线，线性，简单理解为匀速
animation-delay: 2s;//动画延迟2s后开始
animation-iteration-count: infinite;//无限循环
animation-direction: alternate;//轮流替换，即每次动画都反向，默认normal
animation-play-state: running//动画正在运行