前言
这次带大家来用纯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 元素应用两个动画,move 和 morph,并设置了动画的延迟时间。
综合起来,这些样式设置创造了一个旋转的图案,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.75和1,使得元素缩小并恢复到原始尺寸。50% 关键帧将元素水平和垂直方向上的缩放比例分别设置为1.5和0.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
实现,代码简单易懂。另外,感兴趣的小伙伴们还可以在现有基础上发散思维,比如增加点其他效果,或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享,互相学习。最后,完整代码在码上掘金里可以查看,如果有什么问题大家在评论区里讨论~