前言
这次给大家带来的是一个类似蚊香加载一样的效果,这个效果还是非常具有视觉欣赏性的,相比前几篇文章的CSS
特效,这一次的会比较震撼一点。
效果预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
从效果上看感觉像是一层层蚊香摞在一起,通过动画来使得它们达到3D金钟罩的效果。
HTML布局
首先我们通过15个span
子元素来实现金钟罩的每一层,用于创建基本结构。从专业术语上讲,每个span
元素都代表加载动画中的一个旋转的小点。通过添加多个span
元素,可以创建出一串连续旋转的小点,形成一个加载动画的效果。
<div class="loader">
<span></span>
// 以下省略15个span元素
</div>
CSS设计
完成了基本的结构布局,接下来就是为它设计CSS
样式了。我们一步一步来分析:
首先是类名为loader
的CSS
类,相关代码如下。
.loader{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);
}
我们将元素的定位方式设置为相对定位,使其相对于其正常位置进行定位。然后定义好宽度和高度之后,设置元素的变换样式为preserve-3d
,这样可以元素的子元素也会受到3D变换的影响。除此之外,还需要transform
属性来设置元素的变换效果。这里的perspective(500px)
表示以500像素的视角来观察元素,rotateX(60deg)
则表示绕X
轴顺时针旋转60度。
这样就将一个宽高都定义好的元素进行了透视效果的3D旋转,使其以60度角度绕X
轴旋转。
loader
类可以理解为父容器,接下来就是loader
类中的子元素span
。
.loader span{
position: absolute;
display: block;
border: 5px solid #fff;
box-shadow: 0 5px 0 #ccc,
inset 0 5px 0 #ccc;
box-sizing: border-box;
border-radius: 50%;
animation: animate 3s ease-in-out infinite;
}
通过以上样式,我们可以创建一个圆形的动画效果,边框有阴影效果,并且以动画的方式不断旋转。关于CSS
部分大部分都是一样的,这里主要介绍一下这里定义的动画效果。名称为animate
,持续时间为3秒,缓动函数为ease-in-out
,并且动画无限循环播放。
@keyframes animate {
0%,100%{
transform: translateZ(-100px);
}
50%{
transform: translateZ(100px);
}
}
这是一个关键帧动画。关键帧是指动画在不同时间点上的状态或样式。首先该动画名为animate
,它包含了三个时间点的样式变化:
在0% 和100% 的时间点,元素通过transform: translateZ(-100px)
样式将在Z
轴上向后移动100像素,这将使元素远离视图。
在50% 的时间点,元素通过transform: translateZ(100px)
样式将在Z
轴上向前移动100像素。这将使元素靠近视图。
通过应用这个动画,span
元素将在动画的持续时间内以一定的速率来回移动,从而产生一个视觉上的动态效果。
最后就是单独为每个子元素span
赋予样式了。
.loader span:nth-child(1){
top: 0;
left: 0;
bottom: 0;
right: 0;
animation-delay: 1.4s;
}
.loader span:nth-child(2){
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
animation-delay: 1.3s;
}
......
以下省略到第15个span元素
第一个span
元素的样式设置了top、left、bottom和right
属性为0,这意味着它会填充父元素的整个空间。它还设置了animation-delay
属性为1.4秒,表示在加载动画开始之后1.4秒才开始播放动画。
后面14个span
元素都是按照这个道理,以此类推即可。通过给span
元素的动画延迟属性的不同设置,可以实现加载动画的错落感和流畅的过渡效果。
总结
以上就是整个效果的实现过程了,通过设计的动画来实现这个蚊香式加载,整体还是比较简单的。大家可以去码上掘金看看完整代码,然后自己去尝试一下,如果有什么创新的地方或者遇到了什么问题欢迎在评论区告诉我~