1.HTML+CSS写个8-优快云博客

本文介绍了一种使用HTML和CSS实现创意数字8显示的方法。通过精心设计的CSS动画，数字8不仅呈现了独特的视觉效果，还展示了旋转和颜色变化的功能。作者分享了代码细节，包括如何利用transform和keyframes实现动画效果。

感想：有点缺陷。效果地址：https://codepen.io/flyingliao/pen/QobdyE

HTML code：

<div class="eight">
  <span><span></span></span>
  <span></span>
</div>

CSS code：

html, body ,.eight{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.eight{
    width: 80px;
    height: 160px;
}
.eight>span{
    display: block;
    width: 100%;
    height: 50%;
    border: 1px solid white;
    border-radius: 50%;
    transform: rotate(-45deg);
}

.eight span:first-child{
    /* alternate: 动画轮流反向播放 ;
    forwards: 动画完成保持最后一个属性值；
    animation-name: write1;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-iteration-count:1;
    animation-fill-mode: forwards;
   */
    animation: write1 2s ease-in 1 forwards;
}
.eight span:last-child{
    margin-top: -1px;
    animation: write2 4s ease-in 2s forwards;
}
.eight>span:first-child>span{
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border: 1px solid white;
    border-radius: 50%;
    transform: rotate(-deg45);
    animation: write3 2s ease-in 3s forwards;
}
@keyframes write1{
   0%{
      border-top-color: white;
      border-left-color: white;
   }
   100%{
      border-top-color: red;
      border-left-color: red;
   }
}
@keyframes write2{
    0%{
        border-right-color: white;
    }
    25%{
        border-right-color: red;
    }
    50%{
        border-right-color: red;
        border-bottom-color: red;
    }
    75%{
        border-right-color: red;
        border-bottom-color: red;
        border-left-color: red;
    }
    100%{
        border-color: red;
    }
}
@keyframes write3{
    0%{
       border-bottom-color: white;
       border-right-color: white;
    }
   100%{
       border-bottom-color: red;
       border-right-color: red;
   }
}