手把手教你实现一个动画环

316 阅读4分钟

前言

这次带大家来用纯CSS实现一个动画环。整个效果比较简单并且实现起来也很容易,话不多说,我们直接进入主题。

效果预览

效果如下所示。

HTML部分

首先我们看到HTML部分,相关代码如下。

   <figure class="container">
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
      <div><span></span></div>
    </figure>

这里定义了一个 figure 容器,其中包含了十个 div 元素,每个 div 元素内部又包含了一个 span 元素。figure 元素带有 container 类,用于表示这个元素是一个容器。

CSS部分

接着我们看到CSS部分,相关代码如下。

   .container {
      width: 17em;
      height: 17em;
      font-size: 16px;
      position: relative;
    }

    .container div {
      position: absolute;
      width: inherit;
      height: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(calc(var(--n) * 40deg));
    }

这里描述了一个容器(.container)及其内部元素的样式设置。在.container中,设置容器的宽度和高度为 17em,设置字体大小为 16px,并且将容器设置为相对定位,以便让内部的绝对定位元素相对于容器进行定位。

.container div中,将 div 元素设置为绝对定位,以便下级元素进行定位,将子级 div 元素继承了父级容器的宽度和高度,子级元素使用 Flex 布局,内容居中显示,对子级元素进行旋转操作,角度根据自定义属性 --n 的值计算得出。

.container div span中,将 span 元素设置为绝对定位,以便进行自由定位,并且设置 span 元素的宽度和高度为 1em。然后根据自定义属性 --n 的值计算得出 hsl 颜色,并且设置 span 元素最初的水平位置。这里为 span 元素应用两个动画,movemorph,并设置了动画的延迟时间。

综合起来,这些样式设置创造了一个旋转的图案,span 元素根据自定义属性的值计算得到不同的颜色,并且应用了两个动画效果。

接着看到该动画效果的编写,相关代码如下。

  @keyframes move {
      50% {
        left: calc(90% - 0.5em);
      }
    }

    @keyframes morph {
      0%,
      100% {
        transform: scale(0.75, 1);
      }

      50% {
        transform: scale(1.5, 0.5);
      }
    }

这里定义了两个关键帧动画:move和morph。让我们逐个来看看。

@keyframes move这个关键帧动画定义了元素在动画过程中移动的效果。50% 关键帧设定了元素在水平方向上向右移动,通过left属性实现。元素会在动画的中间位置,也就是50% 的时间点,从初始位置向右移动到距离容器右边10% 距离的位置。

@keyframes morph这个关键帧动画定义了元素在动画过程中形状变化的效果。通过transform属性中的scale函数实现元素在动画中逐渐变换尺寸。0%100% 关键帧将元素水平和垂直方向上的缩放比例分别设置为0.751,使得元素缩小并恢复到原始尺寸。50% 关键帧将元素水平和垂直方向上的缩放比例分别设置为1.50.5,使得元素呈现出了不对称的形状。

综合起来,这些关键帧动画描述了元素的运动路径和形状变化效果,在CSS动画中达到了扭曲和移动的视觉效果。

接着看到barrel的相关样式,相关代码如下。

 .pencil .barrel {
      width: 40em;
      background-color: var(--color-middle);
      border-top: 1em solid var(--color-top);
      border-bottom: 1em solid var(--color-bottom);
      color: silver;
      line-height: 1.5em;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

这里描述了铅笔(.pencil)元素中笔身部分(.barrel)的样式设置。这里设置了笔身部分(barrel)的宽度为 40em。使用自定义变量 --color-middle 来设置笔身的背景颜色,并且设置文本颜色为银色。设置行高为1.5em以及字母之间的间距为0.1em,以提高文本的可读性。综合起来,这里定义了铅笔笔身部分的形状、颜色和文本样式,以及文字的排列方式。

最后就是通过码使用:nth-child伪类为具有类名.container的元素下的子元素设置了自定义属性 --n的值。

总结

以上就是整个效果的实现过程了,纯 CSS 实现,代码简单易懂。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~