效果演示
这段代码实现了一个立方体旋转加载的效果,其中每个小立方体都有不同的颜色和动画效果。整个立方体是由六个相同的小立方体组成的,每个小立方体都有三个面,分别是前面、后面和侧面。每个小立方体都有一个不同的颜色和动画效果,并且在旋转时会有不同的缩放和旋转效果。整个立方体在旋转时会有一种绕组的效果,整个立方体会不断旋转和缩放,形成一种动态的效果。
Code
<div class="loop cubes">
<div class="item cubes"></div>
<div class="item cubes"></div>
<div class="item cubes"></div>
<div class="item cubes"></div>
<div class="item cubes"></div>
<div class="item cubes"></div>
</div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
}
.cubes {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
.loop {
transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);
}
@keyframes s {
to {
transform: scale3d(0.2, 0.2, 0.2);
}
}
.item {
margin: -1.5625em;
width: 3.125em;
height: 3.125em;
transform-origin: 50% 50% -1.5625em;
box-shadow: 0 0 0.125em currentColor;
background: currentColor;
animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;
}
.item:before,
.item:after {
position: absolute;
width: inherit;
height: inherit;
transform-origin: 0 100%;
box-shadow: inherit;
background: currentColor;
content: "";
}
.item:before {
bottom: 100%;
transform: rotateX(90deg);
}
.item:after {
left: 100%;
transform: rotateY(90deg);
}
.item:nth-child(1) {
margin-top: 6.25em;
color: #fe1e52;
animation-delay: -1.2s;
}
.item:nth-child(1):before {
color: #ff6488;
}
.item:nth-child(1):after {
color: #ff416d;
}
.item:nth-child(2) {
margin-top: 3.125em;
color: #fe4252;
animation-delay: -1s;
}
.item:nth-child(2):before {
color: #ff8892;
}
.item:nth-child(2):after {
color: #ff6572;
}
.item:nth-child(3) {
margin-top: 0em;
color: #fe6553;
animation-delay: -0.8s;
}
.item:nth-child(3):before {
color: #ffa499;
}
.item:nth-child(3):after {
color: #ff8476;
}
.item:nth-child(4) {
margin-top: -3.125em;
color: #fe8953;
animation-delay: -0.6s;
}
.item:nth-child(4):before {
color: #ffb999;
}
.item:nth-child(4):after {
color: #ffa176;
}
.item:nth-child(5) {
margin-top: -6.25em;
color: #feac54;
animation-delay: -0.4s;
}
.item:nth-child(5):before {
color: #ffce9a;
}
.item:nth-child(5):after {
color: #ffbd77;
}
.item:nth-child(6) {
margin-top: -9.375em;
color: #fed054;
animation-delay: -0.2s;
}
.item:nth-child(6):before {
color: #ffe49a;
}
.item:nth-child(6):after {
color: #ffda77;
}
实现思路拆分
body {
height: 100vh; /* 设置body高度为视口高度 */
display: flex; /* 设置body元素为flex布局 */
justify-content: center; /* 设置flex容器中内容的水平对齐方式为居中对齐 */
align-items: center; /* 设置flex容器中内容的垂直对齐方式为居中对齐 */
background-color: #e8e8e8; /* 设置body元素的背景颜色为#e8e8e8 */
}
这段代码设置了整个页面的样式,包括高度、布局方式、对齐方式和背景颜色等。
.cubes {
position: absolute; /* 设置绝对定位 */
top: 50%; /* 设置距离顶部的距离为视口高度的一半 */
left: 50%; /* 设置距离左侧的距离为视口宽度的一半 */
transform-style: preserve-3d; /* 设置3D效果 */
}
这段代码设置了立方体的样式,包括位置、3D效果和动画效果等。
.loop {
transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em); /* 设置旋转和缩放效果 */
}
这段代码设置了立方体的旋转和缩放效果,包括旋转角度和缩放比例等。
@keyframes s {
to {
transform: scale3d(0.2, 0.2, 0.2); /* 设置动画效果 */
}
}
这段代码设置了立方体的动画效果,包括动画名称、持续时间和动画效果等。
.item {
margin: -1.5625em; /* 设置外边距为-1.5625em */
width: 3.125em; /* 设置宽度为3.125em */
height: 3.125em; /* 设置高度为3.125em */
transform-origin: 50% 50% -1.5625em; /* 设置旋转中心为元素中心 */
box-shadow: 0 0 0.125em currentColor; /* 设置阴影效果 */
background: currentColor; /* 设置背景颜色为当前颜色 */
animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate; /* 设置动画效果 */
}
这段代码设置了每个小立方体的样式,包括外边距、宽度、高度、旋转中心、阴影效果、背景颜色和动画效果等。
.item:before,
.item:after {
position: absolute; /* 设置绝对定位 */
width: inherit; /* 设置宽度为继承自父元素 */
height: inherit; /* 设置高度为继承自父元素 */
transform-origin: 0 100%; /* 设置旋转中心为元素底部 */
box-shadow: inherit; /* 设置阴影效果为继承自父元素 */
background: currentColor; /* 设置背景颜色为当前颜色 */
content: ""; /* 设置内容为空 */
}
这段代码设置了每个小立方体的前面和侧面的样式,包括位置、宽度、高度、旋转中心、阴影效果、背景颜色和内容等。
.item:before {
bottom: 100%; /* 设置距离底部的距离为100% */
transform: rotateX(90deg); /* 设置旋转角度为90度 */
}
这段代码设置了每个小立方体的前面面的样式,包括距离底部的距离和旋转角度等。
.item:after {
left: 100%; /* 设置距离左侧的距离为100% */
transform: rotateY(90deg); /* 设置旋转角度为90度 */
}
这段代码设置了每个小立方体的侧面的样式,包括距离左侧的距离和旋转角度等。
.item:nth-child(1) {
margin-top: 6.25em; /* 设置距离顶部的距离为6.25em */
color: #fe1e52; /* 设置颜色为#fe1e52 */
animation-delay: -1.2s; /* 设置动画延迟时间为-1.2s */
}
这段代码设置了第一个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(1):before {
color: #ff6488; /* 设置颜色为#ff6488 */
}
这段代码设置了第一个小立方体的前面面的样式,包括颜色。
.item:nth-child(1):after {
color: #ff416d; /* 设置颜色为#ff416d */
}
这段代码设置了第一个小立方体的侧面的样式,包括颜色。
.item:nth-child(2) {
margin-top: 3.125em; /* 设置距离顶部的距离为3.125em */
color: #fe4252; /* 设置颜色为#fe4252 */
animation-delay: -1s; /* 设置动画延迟时间为-1s */
}
这段代码设置了第二个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(2):before {
color: #ff8892; /* 设置颜色为#ff8892 */
}
这段代码设置了第二个小立方体的前面面的样式,包括颜色。
.item:nth-child(2):after {
color: #ff6572; /* 设置颜色为#ff6572 */
}
这段代码设置了第二个小立方体的侧面的样式,包括颜色。
.item:nth-child(3) {
margin-top: 0em; /* 设置距离顶部的距离为0 */
color: #fe6553; /* 设置颜色为#fe6553 */
animation-delay: -0.8s; /* 设置动画延迟时间为-0.8s */
}
这段代码设置了第三个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(3):before {
color: #ffa499; /* 设置颜色为#ffa499 */
}
这段代码设置了第三个小立方体的前面面的样式,包括颜色。
.item:nth-child(3):after {
color: #ff8476; /* 设置颜色为#ff8476 */
}
这段代码设置了第三个小立方体的侧面的样式,包括颜色。
.item:nth-child(4) {
margin-top: -3.125em; /* 设置距离顶部的距离为-3.125em */
color: #fe8953; /* 设置颜色为#fe8953 */
animation-delay: -0.6s; /* 设置动画延迟时间为-0.6s */
}
这段代码设置了第四个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(4):before {
color: #ffb999; /* 设置颜色为#ffb999 */
}
这段代码设置了第四个小立方体的前面面的样式,包括颜色。
.item:nth-child(4):after {
color: #ffa176; /* 设置颜色为#ffa176 */
}
这段代码设置了第四个小立方体的侧面的样式,包括颜色。
.item:nth-child(5) {
margin-top: -6.25em; /* 设置距离顶部的距离为-6.25em */
color: #feac54; /* 设置颜色为#feac54 */
animation-delay: -0.4s; /* 设置动画延迟时间为-0.4s */
}
这段代码设置了第五个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(5):before {
color: #ffce9a; /* 设置颜色为#ffce9a */
}
这段代码设置了第五个小立方体的前面面的样式,包括颜色。
.item:nth-child(5):after {
color: #ffbd77; /* 设置颜色为#ffbd77 */
}
这段代码设置了第五个小立方体的侧面的样式,包括颜色。
.item:nth-child(6) {
margin-top: -9.375em; /* 设置距离顶部的距离为-9.375em */
color: #fed054; /* 设置颜色为#fed054 */
animation-delay: -0.2s; /* 设置动画延迟时间为-0.2s */
}
这段代码设置了第六个小立方体的样式,包括距离顶部的距离、颜色和动画延迟时间等。
.item:nth-child(6):before {
color: #ffe49a; /* 设置颜色为#ffe49a */
}
这段代码设置了第六个小立方体的前面面的样式,包括颜色。
.item:nth-child(6):after {
color: #ffda77; /* 设置颜色为#ffda77 */
}
这段代码设置了第六个小立方体的侧面的样式,包括颜色。