效果演示
实现了一个加载动画,可以用来显示页面正在加载中的状态。具体来说,它使用了CSS的动画和变换来实现一个弹跳的圆圈和一个向右移动的线条。当页面加载完成后,这个动画会自动消失。
Code
<div class="loader"></div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #212121;
}
.loader {
position: relative;
width: 120px;
height: 90px;
margin: 0 auto;
}
.loader:before {
content: "";
position: absolute;
bottom: 30px;
left: 50px;
height: 30px;
width: 30px;
border-radius: 50%;
background: #2a9d8f;
animation: loading-bounce 0.5s ease-in-out infinite alternate;
}
.loader:after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 7px;
width: 45px;
border-radius: 4px;
box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
animation: loading-step 1s ease-in-out infinite;
}
@keyframes loading-bounce {
0% {
transform: scale(1, 0.7);
}
40% {
transform: scale(0.8, 1.2);
}
60% {
transform: scale(1, 1);
}
100% {
bottom: 140px;
}
}
@keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
0 10px 0 #f2f2f2,
-35px 50px 0 #f2f2f2,
-70px 90px 0 #f2f2f2;
}
100% {
box-shadow: 0 10px 0 #f2f2f2,
-35px 50px 0 #f2f2f2,
-70px 90px 0 #f2f2f2,
-70px 90px 0 rgba(0, 0, 0, 0);
}
}
实现思路拆分
body {
height: 100vh; /* 设置body高度为视口高度 */
display: flex; /* 设置body元素为flex布局 */
justify-content: center; /* 设置flex容器中内容的水平居中对齐 */
align-items: center; /* 设置flex容器中内容的垂直居中对齐 */
background-color: #212121; /* 设置背景颜色为深灰色 */
}
这段代码设置了页面的基本样式,包括高度、布局方式、背景颜色等。
.loader {
position: relative; /* 设置loader元素为相对定位 */
width: 120px; /* 设置loader元素的宽度为120px */
height: 90px; /* 设置loader元素的高度为90px */
margin: 0 auto; /* 设置loader元素的水平居中对齐 */
}
这段代码设置了loader元素的样式,包括位置、大小、边距等。
.loader:before {
content: ""; /* 设置伪元素的内容为空 */
position: absolute; /* 设置伪元素为绝对定位 */
bottom: 30px; /* 设置伪元素距离底部的距离为30px */
left: 50px; /* 设置伪元素距离左侧的距离为50px */
height: 30px; /* 设置伪元素的高度为30px */
width: 30px; /* 设置伪元素的宽度为30px */
border-radius: 50%; /* 设置伪元素的圆角半径为50% */
background: #2a9d8f; /* 设置伪元素的背景颜色为绿色 */
animation: loading-bounce 0.5s ease-in-out infinite alternate; /* 设置伪元素的动画效果 */
}
这段代码设置了loader元素的伪元素的样式,包括位置、大小、圆角半径、背景颜色和动画效果等。
.loader:after {
content: ""; /* 设置伪元素的内容为空 */
position: absolute; /* 设置伪元素为绝对定位 */
right: 0; /* 设置伪元素距离右侧的距离为0 */
top: 0; /* 设置伪元素距离顶部的距离为0 */
height: 7px; /* 设置伪元素的高度为7px */
width: 45px; /* 设置伪元素的宽度为45px */
border-radius: 4px; /* 设置伪元素的圆角半径为4px */
box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; /* 设置伪元素的阴影效果 */
animation: loading-step 1s ease-in-out infinite; /* 设置伪元素的动画效果 */
}
这段代码设置了loader元素的另一个伪元素的样式,包括位置、大小、圆角半径、阴影效果和动画效果等。
@keyframes loading-bounce {
0% {
transform: scale(1, 0.7); /* 设置伪元素在动画开始时的缩放比例 */
}
40% {
transform: scale(0.8, 1.2); /* 设置伪元素在动画进行到一半时的缩放比例 */
}
60% {
transform: scale(1, 1); /* 设置伪元素在动画结束时的缩放比例 */
}
100% {
bottom: 140px; /* 设置伪元素在动画结束后的底部距离 */
}
}
这段代码设置了loader元素的伪元素的动画效果,包括缩放比例和底部距离等。文章来源:https://www.toymoban.com/news/detail-791468.html
@keyframes loading-step {
0% {
box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
0 10px 0 #f2f2f2,
-35px 50px 0 #f2f2f2,
-70px 90px 0 #f2f2f2; /* 设置伪元素在动画开始时的阴影效果 */
}
100% {
box-shadow: 0 10px 0 #f2f2f2,
-35px 50px 0 #f2f2f2,
-70px 90px 0 #f2f2f2,
-70px 90px 0 rgba(0, 0, 0, 0); /* 设置伪元素在动画结束时的阴影效果 */
}
}
这段代码设置了loader元素的伪元素的动画效果,包括阴影效果。具体来说,它使用了CSS的box-shadow属性来设置伪元素的阴影效果,包括四个阴影层次,每个阴影层次的位置、颜色和模糊半径等属性。在动画开始时,伪元素的阴影效果为四个黑色半透明的阴影层次,从左上角到右下角依次变为灰色半透明的阴影层次;在动画结束时,伪元素的阴影效果为四个灰色半透明的阴影层次,从右上角到左下角依次变为黑色半透明的阴影层次。这样可以实现一个向右移动的线条的效果。文章来源地址https://www.toymoban.com/news/detail-791468.html
到了这里,关于弹跳小球加载的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!