css实现三维搭积木loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现三维搭积木loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Varela+Round&amp;display=swap'>
  
<style>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--primary: hsl(var(--hue),90%,55%);
	--red: hsl(3,90%,50%);
	--orange: hsl(33,90%,50%);
	--green: hsl(153,90%,30%);
	--purple: hsl(273,90%,50%);
	--magenta: hsl(303,90%,50%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	font: 1em/1.5 "Varela Round", sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
main {
	padding: 1.5em 0;
}
.message {
	height: 1.5em;
	position: relative;
	text-align: center;
}
.message__line {
	animation: message-fade-in-out 5s linear;
	opacity: 0;
	position: absolute;
	inset: 0;
	text-align: center;
}
.message__line:nth-child(2) { animation-delay: 5s; }
.message__line:nth-child(3) { animation-delay: 10s; }
.message__line:nth-child(4) { animation-delay: 15s; }
.message__line:nth-child(5) { animation-delay: 20s; }
.message__line:nth-child(6) { animation-delay: 25s; }
.message__line:nth-child(7) { animation-delay: 30s; }

.message__line:last-child {
	animation-name: message-fade-in;
	animation-delay: 35s;
	animation-fill-mode: forwards;
}
.tower,
.tower__brick,
.tower__brick-layer,
.tower__brick-side,
.tower__brick-stud,
.tower__group {
	transform-style: preserve-3d;
}
.tower {
	margin: 0 auto 1.5em auto;
	position: relative;
	perspective: 800px;
	width: 16em;
	height: 16em;
}
.tower__brick,
.tower__brick-layer,
.tower__brick-side,
.tower__brick-stud,
.tower__group {
	position: absolute;
}
.tower__brick,
.tower__brick-side,
.tower__group {
	animation-duration: 16s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.tower__brick,
.tower__brick-side {
	background-color: var(--primary);
}
.tower__brick {
	background-image: radial-gradient(100% 100% at center,hsla(0,0%,0%,0.3) 0.3em,hsla(0,0%,0%,0) 0.3em);
	background-size: 1em 1em;
	width: 2em;
	height: 1em;
}
.tower__brick-layer--4 {
	transform: translateZ(4.8em);
}
.tower__brick-layer--3 {
	transform: translateZ(3.6em);
}
.tower__brick-layer--2 {
	transform: translateZ(2.4em);
}
.tower__brick-layer--1 {
	transform: translateZ(1.2em);
}
.tower__brick-layer---1 {
	transform: translateZ(-1.2em);
}
.tower__brick-layer---2 {
	transform: translateZ(-2.4em);
}
.tower__brick-layer---3 {
	transform: translateZ(-3.6em);
}
.tower__brick-side {
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 1.2em;
	transform: rotateX(90deg);
	transform-origin: 50% 100%;
}
.tower__brick-side:nth-child(2) {
	top: 0;
	bottom: auto;
	left: 100%;
	width: 1.2em;
	height: 100%;
	transform: rotateY(90deg);
	transform-origin: 0 50%;
}
.tower__brick-side:nth-child(3) {
	top: 100%;
	left: 0;
	width: 100%;
	height: 1.2em;
	transform: rotateX(-90deg);
	transform-origin: 50% 0;
}
.tower__brick-side:nth-child(4) {
	top: 0;
	right: 100%;
	bottom: auto;
	left: auto;
	width: 1.2em;
	height: 100%;
	transform: rotateY(-90deg);
	transform-origin: 100% 50%;
}
.tower__brick-side:nth-child(even),
.tower__brick--90 .tower__brick-side:nth-child(odd),
.tower__brick--135 .tower__brick-side:nth-child(odd),
.tower__brick--270 .tower__brick-side:nth-child(odd),
.tower__brick--315 .tower__brick-side:nth-child(odd) {
	animation-name: brick-side-1;
	filter: brightness(0.5);
}
.tower__brick-side:nth-child(odd),
.tower__brick--90 .tower__brick-side:nth-child(even),
.tower__brick--135 .tower__brick-side:nth-child(even),
.tower__brick--270 .tower__brick-side:nth-child(even),
.tower__brick--315 .tower__brick-side:nth-child(even) {
	animation-name: brick-side-2;
	filter: brightness(0.75);
}
.tower__brick-stud {
	background-color: inherit;
	border-radius: 50%;
	top: 0.2em;
	left: 0.2em;
	width: 0.6em;
	height: 0.6em;
	transform: translateZ(0.2em);
}
.tower__brick-stud:nth-child(6) {
	left: 1.2em;
}
.tower__brick--0 {
	transform: translate3d(-1.5em,-1.5em,0);
}
.tower__brick--45 {
	transform: translate3d(-0.5em,-1.5em,0);
}
.tower__brick--90 {
	transform: translate3d(0,-1em,0) rotateZ(90deg);
}
.tower__brick--135 {
	transform: translate3d(0,0,0) rotateZ(90deg);
}
.tower__brick--180 {
	transform: translate3d(-0.5em,0.5em,0);
}
.tower__brick--225 {
	transform: translate3d(-1.5em,0.5em,0);
}
.tower__brick--270 {
	transform: translate3d(-2em,0,0) rotateZ(-90deg);
}
.tower__brick--315 {
	transform: translate3d(-2em,-1em,0) rotateZ(-90deg);
}
.tower__brick--red,
.tower__brick--red .tower__brick-side {
	background-color: var(--red);
}
.tower__brick--orange,
.tower__brick--orange .tower__brick-side {
	background-color: var(--orange);
}
.tower__brick--green,
.tower__brick--green .tower__brick-side {
	background-color: var(--green);
}
.tower__brick--purple,
.tower__brick--purple .tower__brick-side {
	background-color: var(--purple);
}
.tower__brick--magenta,
.tower__brick--magenta .tower__brick-side {
	background-color: var(--magenta);
}
.tower__brick--move1 { animation-name: brick-move-1; }
.tower_.........完整代码请登录后点击上方下载按钮下载查看