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__brick--move2 { animation-name: brick-move-2; }
.tower__brick--move3 { animation-name: brick-move-3; }
.tower__brick--move4 { animation-name: brick-move-4; }
.tower__brick--move5 { animation-name: brick-move-5; }
.tower__brick--move6 { animation-name: brick-move-6; }
.tower__brick--move7 { animation-name: brick-move-7; }
.tower__brick--move8 { animation-name: brick-move-8; }
.tower__brick--move9 { animation-name: brick-move-9; }
.tower__brick--move10 { animation-name: brick-move-10; }
.tower__brick--move11 { animation-name: brick-move-11; }
.tower__brick--move12 { animation-name: brick-move-12; }
.tower__brick--move13 { animation-name: brick-move-13; }
.tower__brick--move14 { animation-name: brick-move-14; }
.tower__brick--move15 { animation-name: brick-move-15; }
.tower__brick--move16 { animation-name: brick-move-16; }

.tower__group {
	animation-name: brick-group;
	top: 50%;
	left: 50%;
	transform: rotateX(45deg) rotateZ(45deg);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
}

/* Animations */
@keyframes brick-group {
	from { transform: rotateX(45deg) rotateZ(0.125turn) translateZ(0); }
	to { transform: rotateX(45deg) rotateZ(2.125turn) translateZ(-4.8em); }
}
@keyframes brick-side-1 {
	from, 25%, 50%, 75%, to { filter: brightness(0.5); }
	12.5%, 37.5%, 62.5%, 87.5% { filter: brightness(0.75); }
}
@keyframes brick-side-2 {
	from, 25%, 50%, 75%, to { filter: brightness(0.75); }
	12.5%, 37.5%, 62.5%, 87.5% { filter: brightness(0.5); }
}
@keyframes brick-move-1 {
	from { animation-timing-function: ease-in; transform: translate3d(0,0,0) rotateZ(90deg); }
	1.25% { animation-timing-function: linear; transform: translate3d(0,0,-0.4em) rotateZ(90deg); }
	2.5% { transform: translate3d(2em,0,-0.4em) rotateZ(90deg); }
	3.75% { transform: translate3d(2em,0,10em) rotateZ(90deg); }
	5% { animation-timing-function: ease-out; transform: translate3d(0,0,10em) rotateZ(90deg); }
	6.25%, to { transform: translate3d(0,0,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-2 {
	from, 6.25% { animation-timing-function: ease-in; transform: translate3d(-0.5em,-1.5em,0); }
	7.5% { animation-timing-function: linear; transform: translate3d(-0.5em,-1.5em,-0.4em); }
	8.75% { transform: translate3d(-0.5em,-3.5em,-0.4em); }
	10% { transform: translate3d(-0.5em,-3.5em,10em); }
	11.25% { animation-timing-function: ease-out; transform: translate3d(-0.5em,-1.5em,10em); }
	12.5%, to { transform: translate3d(-0.5em,-1.5em,9.6em); }
}
@keyframes brick-move-3 {
	from, 12.5% { animation-timing-function: ease-in; transform: translate3d(-2em,-1em,0) rotateZ(-90deg); }
	13.75% { animation-timing-function: linear; transform: translate3d(-2em,-1em,-0.4em) rotateZ(-90deg); }
	15% { transform: translate3d(-4em,-1em,-0.4em) rotateZ(-90deg); }
	16.25% { transform: translate3d(-4em,-1em,10em) rotateZ(-90deg); }
	17.5% { animation-timing-function: ease-out; transform: translate3d(-2em,-1em,10em) rotateZ(-90deg); }
	18.75%, to { transform: translate3d(-2em,-1em,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-4 {
	from, 18.75% { animation-timing-function: ease-in; transform: translate3d(-1.5em,0.5em,0); }
	20% { animation-timing-function: linear; transform: translate3d(-1.5em,0.5em,-0.4em); }
	21.25% { transform: translate3d(-1.5em,2.5em,-0.4em); }
	22.5% { transform: translate3d(-1.5em,2.5em,10em); }
	23.75% { animation-timing-function: ease-out; transform: translate3d(-1.5em,0.5em,10em); }
	25%, to { transform: translate3d(-1.5em,0.5em,9.6em); }
}
@keyframes brick-move-5 {
	from, 25% { animation-timing-function: ease-in; transform: translate3d(0,-1em,0) rotateZ(90deg); }
	26.25% { animation-timing-function: linear; transform: translate3d(0,-1em,-0.4em) rotateZ(90deg); }
	27.5% { transform: translate3d(2em,-1em,-0.4em) rotateZ(90deg); }
	28.75% { transform: translate3d(2em,-1em,10em) rotateZ(90deg); }
	30% { animation-timing-function: ease-out; transform: translate3d(0,-1em,10em) rotateZ(90deg); }
	31.25%, to { transform: translate3d(0,-1em,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-6 {
	from, 31.25% { animation-timing-function: ease-in; transform: translate3d(-1.5em,-1.5em,0); }
	32.5% { animation-timing-function: linear; transform: translate3d(-1.5em,-1.5em,-0.4em); }
	33.75% { transform: translate3d(-1.5em,-3.5em,-0.4em); }
	35% { transform: translate3d(-1.5em,-3.5em,10em); }
	36.25% { animation-timing-function: ease-out; transform: translate3d(-1.5em,-1.5em,10em); }
	37.5%, to { transform: translate3d(-1.5em,-1.5em,9.6em); }
}
@keyframes brick-move-7 {
	from, 37.5% { animation-timing-function: ease-in; transform: translate3d(-2em,0,0) rotateZ(-90deg); }
	38.75% { animation-timing-function: linear; transform: translate3d(-2em,0,-0.4em) rotateZ(-90deg); }
	40% { transform: translate3d(-4em,0,-0.4em) rotateZ(-90deg); }
	41.25% { transform: translate3d(-4em,0,10em) rotateZ(-90deg); }
	42.5% { animation-timing-function: ease-out; transform: translate3d(-2em,0,10em) rotateZ(-90deg); }
	43.75%, to { transform: translate3d(-2em,0,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-8 {
	from, 43.75% { animation-timing-function: ease-in; transform: translate3d(-0.5em,0.5em,0); }
	45% { animation-timing-function: linear; transform: translate3d(-0.5em,0.5em,-0.4em); }
	46.25% { transform: translate3d(-0.5em,2.5em,-0.4em); }
	47.5% { transform: translate3d(-0.5em,2.5em,10em); }
	48.75% { animation-timing-function: ease-out; transform: translate3d(-0.5em,0.5em,10em); }
	50%, to { transform: translate3d(-0.5em,0.5em,9.6em); }
}
@keyframes brick-move-9 {
	from, 50% { animation-timing-function: ease-in; transform: translate3d(0,0,0) rotateZ(90deg); }
	51.25% { animation-timing-function: linear; transform: translate3d(0,0,-0.4em) rotateZ(90deg); }
	52.5% { transform: translate3d(2em,0,-0.4em) rotateZ(90deg); }
	53.75% { transform: translate3d(2em,0,10em) rotateZ(90deg); }
	55% { animation-timing-function: ease-out; transform: translate3d(0,0,10em) rotateZ(90deg); }
	56.25%, to { transform: translate3d(0,0,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-10 {
	from, 56.25% { animation-timing-function: ease-in; transform: translate3d(-0.5em,-1.5em,0); }
	57.5% { animation-timing-function: linear; transform: translate3d(-0.5em,-1.5em,-0.4em); }
	58.75% { transform: translate3d(-0.5em,-3.5em,-0.4em); }
	60% { transform: translate3d(-0.5em,-3.5em,10em); }
	61.25% { animation-timing-function: ease-out; transform: translate3d(-0.5em,-1.5em,10em); }
	62.5%, to { transform: translate3d(-0.5em,-1.5em,9.6em); }
}
@keyframes brick-move-11 {
	from, 62.5% { animation-timing-function: ease-in; transform: translate3d(-2em,-1em,0) rotateZ(-90deg); }
	63.75% { animation-timing-function: linear; transform: translate3d(-2em,-1em,-0.4em) rotateZ(-90deg); }
	65% { transform: translate3d(-4em,-1em,-0.4em) rotateZ(-90deg); }
	66.25% { transform: translate3d(-4em,-1em,10em) rotateZ(-90deg); }
	67.5% { animation-timing-function: ease-out; transform: translate3d(-2em,-1em,10em) rotateZ(-90deg);  }
	68.75%, to { transform: translate3d(-2em,-1em,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-12 {
	from, 68.75% { animation-timing-function: ease-in; transform: translate3d(-1.5em,0.5em,0); }
	70% { animation-timing-function: linear; transform: translate3d(-1.5em,0.5em,-0.4em); }
	71.25% { transform: translate3d(-1.5em,2.5em,-0.4em);  }
	72.5% { transform: translate3d(-1.5em,2.5em,10em); }
	73.75% { animation-timing-function: ease-out; transform: translate3d(-1.5em,0.5em,10em); }
	75%, to { transform: translate3d(-1.5em,0.5em,9.6em); }
}
@keyframes brick-move-13 {
	from, 75% { animation-timing-function: ease-in; transform: translate3d(0,-1em,0) rotateZ(90deg); }
	76.25% { animation-timing-function: linear; transform: translate3d(0,-1em,-0.4em) rotateZ(90deg);  }
	77.5% { transform: translate3d(2em,-1em,-0.4em) rotateZ(90deg); }
	78.75% { transform: translate3d(2em,-1em,10em) rotateZ(90deg); }
	80% { animation-timing-function: ease-out; transform: translate3d(0,-1em,10em) rotateZ(90deg); }
	81.25%, to { transform: translate3d(0,-1em,9.6em) rotateZ(90deg); }
}
@keyframes brick-move-14 {
	from, 81.25% { animation-timing-function: ease-in; transform: translate3d(-1.5em,-1.5em,0); }
	82.5% { animation-timing-function: linear; transform: translate3d(-1.5em,-1.5em,-0.4em); }
	83.75% { transform: translate3d(-1.5em,-3.5em,-0.4em); }
	85% { transform: translate3d(-1.5em,-3.5em,10em); }
	86.25% { animation-timing-function: ease-out; transform: translate3d(-1.5em,-1.5em,10em); }
	87.5%, to { transform: translate3d(-1.5em,-1.5em,9.6em); }
}
@keyframes brick-move-15 {
	from, 87.5% { animation-timing-function: ease-in; transform: translate3d(-2em,0,0) rotateZ(-90deg); }
	88.75% { animation-timing-function: linear; transform: translate3d(-2em,0,-0.4em) rotateZ(-90deg); }
	90% { transform: translate3d(-4em,0,-0.4em) rotateZ(-90deg); }
	91.25% { transform: translate3d(-4em,0,10em) rotateZ(-90deg); }
	92.5% { animation-timing-function: ease-out; transform: translate3d(-2em,0,10em) rotateZ(-90deg); }
	93.75%, to { transform: translate3d(-2em,0,9.6em) rotateZ(-90deg); }
}
@keyframes brick-move-16 {
	from, 93.75% { animation-timing-function: ease-in; transform: translate3d(-0.5em,0.5em,0); }
	95% { animation-timing-function: linear; transform: translate3d(-0.5em,0.5em,-0.4em); }
	96.25% { transform: translate3d(-0.5em,2.5em,-0.4em); }
	97.5% { transform: translate3d(-0.5em,2.5em,10em); }
	98.75% { animation-timing-function: ease-out; transform: translate3d(-0.5em,0.5em,10em); }
	to { transform: translate3d(-0.5em,0.5em,9.6em); }
}
@keyframes message-fade-in {
	from { opacity: 0; }
	6%, to { opacity: 1; }
}
@keyframes message-fade-in-out {
	from, to { opacity: 0; }
	6%, 94% { opacity: 1; }
}
</style>



</head>

<body >
  <main>
	<div class="tower">
		<div class="tower__group">
			<div class="tower__brick-layer tower__brick-layer--4">
				<div class="tower__brick tower__brick--0">
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-stud"></div>
					<div class="tower__brick-stud"></div>
				</div>
				<div class="tower__brick tower__brick--90 tower__brick--red">
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-side"></div>
					<div class="tower__brick-stud"></div>
					<div class="tower__brick-stud"></div>
				</div&g.........完整代码请登录后点击上方下载按钮下载查看