卡通刺猬加载滚动动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：卡通刺猬加载滚动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
html {
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

*:before,
*:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	content: "";
	position: absolute;
}

:root {
	--container-size: 120px;
	--inner-container-size: 74px;
	--stroke-size: 12px;
	--inner-stroke-size: 8px;

	--color-cream: #faddb4;
	--color-teal: #819679;
	--color-brown: #7a2d33;
	--color-sand: #ffac65;
	--color-orange: #fc6841;
}

body {
	width: 100vw;
	height: 100vh;
	background: var(--color-sand);
	display: flex;
	align-items: center;
	overflow: hidden;
}

body:before {
	position: absolute;
	width: 100%;
	height: 100vh;
	border: calc(var(--stroke-size) * 2) solid var(--color-cream);
	z-index: 200;
}

#armadillo {
	width: calc(var(--container-size) * 2);
	height: calc(var(--container-size) * 2);
	position: relative;
	overflow: hidden;
	animation: spin 1.5s ease-in-out infinite, move 4.5s ease-in-out infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes move {
	0% {
		left: calc(var(--container-size) * -2);
	}

	33.33% {
		left: 20%;
	}

	66.66% {
		left: 60%;
	}

	100% {
		left: calc(100% + calc(var(--container-size) * 2));
	}
}


@keyframes move-mobile {
	0% {
		left: calc(var(--container-size) * -2);
	}
		50% {
		left: calc(50% - var(--container-size));
	}

	100% {
		left: calc(100% + calc(var(--container-size) * 2));
	}
}

@media only screen and (max-width: 600px) {
#armadillo {
	animation: spin 1.5s ease-in-out infinite, move-mobile 3s ease-in-out infinite;
}
}



.resize-animation-stopper * {
	animation: none !important;
	transition: none !important;
}

#armadillo > div:not(#outer-spokes):not(#inner-circle):not(#moon) {
	width: var(--container-size);
	height: var(--container-size);
	overflow: hidden;
	position: absolute;
}

#quad-1 {
	top: 0;
	left: 0;
}

#quad-2 {
	bottom: 0;
	left: 0;
}

#quad-3,
#quad-1:before,
#quad-1:after,
#quad-1 .dots-container .dots,
#quad-1 #segment-1,
#quad-1 #segment-1 .stripes:before,
#quad-1 #segment-1 .stripes:after,
#quad-1 #segment-2,
#quad-1 #segment-2 #triangles,
#quad-1 #segment-2 #triangles:before,
#quad-1 #segment-2 #triangles:after,
#quad-1 #segment-1 .stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-1 .spoke,
#quad-2:before,
#quad-2:after {
	bottom: 0;
	right: 0;
}

#quad-4,
#quad-2 #segment-2:after,
#quad-2:before,
#quad-2:after,
#quad-2 .spikes,
#quad-2 .spikes:before,
#quad-2 .spikes:after,
#quad-2 .dots-container .dots,
#quad-2 #segment-2,
#quad-2 #segment-2:before,
#quad-2 #segment-2 #details,
#quad-2 #segment-1,
#quad-2 #segment-1 #segment-inner {
	top: 0;
	right: 0;
}

#quad-1 > #quad-1-spikes,
#quad-1 > #quad-1-spikes:before,
#quad-1 > #quad-1-spikes:after {
	width: var(--container-size);
	height: var(--inner-stroke-size);
	bottom: 0;
	right: 0;
	background: var(--color-orange);
	border-bottom-left-radius: var(--inner-stroke-size);
	transform-origin: center right;
}

#quad-1 > #quad-1-spikes {
	position: absolute;
	margin-bottom: calc(var(--inner-stroke-size) * -0.5);
	transform: rotate(45deg);
	overflow: visible;
	z-index: 100;
}

#quad-1 > #quad-1-spikes:before {
	transform: rotate(-22.5deg);
}

#quad-1 > #quad-1-spikes:after {
	transform: rotate(22.5deg);
}

#quad-1:before {
	width: calc(var(--container-size) - var(--inner-stroke-size));
	height: calc(var(--container-size) - var(--inner-stroke-size));
	border-top-left-radius: calc(var(--container-size) - var(--inner-stroke-size));
	background: var(--color-teal);
	border-left: var(--stroke-size) solid var(--color-cream);
	border-top: var(--stroke-size) solid var(--color-cream);
}

#quad-1:after {
	width: calc(var(--inner-container-size) + var(--inner-stroke-size));
	height: calc(var(--inner-container-size) + var(--inner-stroke-size));
	border-top-left-radius: calc(
		var(--inner-container-size) + var(--inner-stroke-size)
	);
	border-left: var(--inner-stroke-size) solid var(--color-orange);
	border-top: var(--inner-stroke-size) solid var(--color-orange);
}

#armadillo > div .dots-container {
	width: var(--container-size);
	height: var(--container-size);
	z-index: 100;
}

#armadillo > div .dots-container .dots {
	position: absolute;
	overflow: visible;
	z-index: 100;
	width: calc(var(--container-size) * 0.78);
	height: var(--inner-stroke-size);
}

#armadillo #quad-1 .dots-container .dots,
#armadillo #quad-2 .dots-container .dots {
	transform-origin: center right;
}

#armadillo #quad-1 .dots-container .dots:before,
#armadillo #quad-2 .dots-container .dots:before {
	left: 0;
}

#quad-1 .dots-container .dots {
	margin-bottom: calc(var(--inner-stroke-size) * -0.5);
}

#armadillo > div .dots-container .dots:before {
	width: var(--inner-stroke-size);
	height: var(--inner-stroke-size);
	border-radius: 50%;
}

#quad-1 .dots-container .dots {
	transform: rotate(11.25deg);
}

#quad-1 .dots-container .dots:nth-of-type(2) {
	transform: rotate(33.75deg);
}

#quad-1 .dots-container .dots:nth-of-type(3) {
	transform: rotate(56.25deg);
}

#quad-1 .dots-container .dots:nth-of-type(4) {
	transform: rotate(78.75deg);
}

#quad-1 .dots-container .dots:nth-of-type(even):before {
	background: var(--color-cream);
}

#quad-1 .dots-container .dots:nth-of-type(odd):before {
	background: var(--color-brown);
}

#quad-1 #segment-1 {
	transform: skewY(45deg);
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	transform-origin: bottom right;
	position: absolute;
	overflow: hidden;
	z-index: 100;
}

.stripes {
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	position: absolute;
	border: var(--inner-stroke-size) solid var(--color-brown);
}

#quad-1 #segment-1 .stripes {
	bottom: 0;
	right: 0;
	transform-origin: bottom right;
	border-top-left-radius: var(--inner-container-size);
	border-bottom: 0;
	border-right: 0;
	transform: skewY(-45deg);
	background: var(--color-sand);
}

.stripes:before,
.stripes:after {
	width: calc(var(--inner-container-size) * 0.6);
	position: absolute;
	transform: rotate(-22.5deg);
}

.stripes:after {
	height: calc(
		calc(var(--inner-container-size) * 0.75) +
			calc(var(--inner-stroke-size) * 0.5)
	);
}

.stripes:before {
	height: calc(
		calc(var(--inner-container-size) * 0.6) + calc(var(--inner-stroke-size) * 0.5)
	);
}

#quad-1 #segment-1 .stripes:before,
#quad-1 #segment-1 .stripes:after {
	margin-right: calc(var(--inner-container-size) * -0.3);
	transform-origin: bottom center;
	border-top: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-1 #segment-1 .stripes:before {
	background: var(--color-orange);
}

#quad-1 #segment-1 .stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-2 #segment-2:after {
	margin-right: calc(var(--inner-stroke-size) * -3.25);
	margin-bottom: calc(var(--inner-stroke-size) * -3.25);
}

#quad-2 #segment-2:after {
	margin-right: calc(var(--inner-stroke-size) * -3.25);
	margin-top: calc(var(--inner-stroke-size) * -3.25);
}

.stripes-inner,
#quad-1 #segment-2 #triangles-inner,
#quad-2 #segment-2:after {
	position: absolute;
	width: calc(var(--inner-stroke-size) * 6.5);
	height: calc(var(--inner-stroke-size) * 6.5);
	background: var(--color-teal);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	border: var(--inner-stroke-size) solid var(--color-brown);
}

.stripes-inner:before {
	width: calc(var(--inner-container-size) * 0.6);
	height: calc(
		calc(var(--inner-container-size) * 0.68) +
			calc(var(--inner-stroke-size) * 0.5)
	);
	position: absolute;
	transform: rotate(-22.5deg);
}

#quad-1 #segment-1 .stripes-inner:before {
	bottom: 0;
	transform-origin: bottom center;
	border-top: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-1 #segment-2 {
	transform: skewX(45deg);
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	transform-origin: bottom right;
	position: absolute;
	overflow: hidden;
	z-index: 100;
}

#quad-1 #segment-2 #triangles {
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	position: absolute;
	transform-origin: bottom right;
	border-top-left-radius: var(--inner-container-size);
	border: var(--inner-stroke-size) solid var(--color-brown);
	border-bottom: 0;
	border-right: 0;
	background: var(--color-cream);
	transform: skewX(-45deg);
}

#quad-1 #segment-2 #triangles:before {
	position: absolute;
	border-left: calc(var(--inner-stroke-size) * 3.2) solid var(--color-sand);
	border-top: var(--inner-stroke-size) solid transparent;
	border-bottom: var(--inner-stroke-size) solid transparent;
	width: 0;
	height: calc(var(--inner-stroke-size) * 2.8);
	padding-right: calc(var(--inner-stroke-size) * 4);
	margin-bottom: calc(var(--inner-stroke-size) * -1.25);
	transform-origin: center right;
	transform: rotate(22.5deg);
}

#quad-1 #segment-2 #triangles:after {
	width: 0;
	height: 0;
	border-top: calc(var(--inner-stroke-size) * 0.5) solid transparent;
	border-left: calc(var(--inner-stroke-size) * 1.6) solid var(--color-orange);
	border-bottom: calc(var(--inner-stroke-size) * 0.5) solid transparent;
	padding-right: calc(var(--inner-stroke-size) * 5);
	margin-bottom: calc(var(--inner-stroke-size) * -0.5);
	transform-origin: center right;
	transform: rotate(22.5deg);
}

#quad-1 .spoke {
	width: calc(var(--inner-stroke-size) * 6.5);
	height: calc(var(--inner-stroke-size) * 6.5);
	position: absolute;
	z-index: 100;
	margin-right: calc(var(--inner-stroke-size) * -3.25);
	margin-bottom: calc(var(--inner-stroke-size) * -3.25);
	border-radius: 50%;
	transform: rotate(-45deg);
}

#quad-1 .spoke:after {
	width: var(--inner-stroke-size);
	height: calc(
		var(--inner-container-size) - calc(var(--inner-stroke-size) * 2.5)
	);
	background: var(--color-brown);
	position: absolute;
	bottom: 0;
	z-index: 100;
	transform-origin: bottom center;
	margin-bottom: calc(100% - var(--inner-stroke-size));
	margin-left: calc(
		calc(var(--inner-stroke-size) * 3.25) - var(--inner-stroke-size) * 0.5
	);
}

#quad-2:before {
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	border-bottom-left-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
	background: var(--color-teal);
	border-left: var(--inner-stroke-size) solid var(--color-orange);
	border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-2:after {
	width: calc(var(--inner-container-size) + var(--inner-stroke-size));
	height: calc(var(--inner-container-size) + var(--inner-stroke-size));
	border-bottom-left-radius: calc(
		var(--inner-container-size) + var(--inner-stroke-size)
	);
	border-left: var(--inner-stroke-size) solid var(--color-orange);
	border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-3:before {
	top: 0;
	left: 0;
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	border-bottom-right-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
	background: var(--color-teal);
	border-right: var(--inner-stroke-size) solid var(--color-orange);
	border-bottom: var(--inner-stroke-size) solid var(--color-orange);
}

#quad-3:after {
	top: 0;
	left: 0;
	width: calc(var(--inner-container-size) + var(--inner-stroke-size));
	height: calc(var(--inner-container-size) + var(--inner-stroke-size));
	border-bottom-right-radius: calc(
		var(--inner-container-size) + var(--inner-stroke-size)
	);
	border-right: var(--inner-stroke-size) solid var(--color-sand);
	border-bottom: var(--inner-stroke-size) solid var(--color-sand);
}

#quad-3 > #segment-1 {
	transform: skewY(45deg);
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	transform-origin: top left;
	position: absolute;
	overflow: hidden;
	z-index: 100;
}

#quad-3 > #segment-1 .stripes {
	width: var(--inner-container-size);
	height: var(--inner-container-size);
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	border-bottom-right-radius: var(--inner-container-size);
	border-right: var(--inner-stroke-size) solid var(--color-brown);
	border-bottom: var(--inner-stroke-size) solid var(--color-brown);
	background: ;
	transform: skewY(-45deg);
	background: var(--color-orange);
}

#quad-3 > #segment-1 .stripes {
	top: 0;
	left: 0;
	transform-origin: top left;
	border-bottom-right-radius: var(--inner-container-size);
	border-top: 0;
	border-left: 0;
	background: var(--color-orange);
}

#quad-3 > #segment-1 .stripes-inner {
	margin-left: calc(var(--inner-stroke-size) * -3.25);
	margin-top: calc(var(--inner-stroke-size) * -3.25);
}

#quad-3 > #segment-1 .stripes-inner:before {
	top: 0;
	transform-origin: top center;
	border-bottom: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-3 > #segment-1 .stripes:before,
#quad-3 > #segment-1 .stripes:after {
	margin-left: calc(var(--inner-container-size) * -0.3);
	transform-origin: top center;
	border-bottom: calc(var(--inner-stroke-size) * 0.5) solid var(--color-brown);
}

#quad-3 > #segment-1 .stripes:before {
	background: var(--color-teal);
}

#armadillo #quad-3 > .dots-container .dots {
	transform-origin: center left;
	margin-top: calc(var(--inner-stroke-size) * -0.5);
}

#armadillo #quad-3 > .dots-container .dots:before {
	right: 0;
}

#quad-3 > .dots-container .dots:nth-of-type(1) {
	transform: rotate(56.25deg);
}

#quad-3 > .dots-container .dots:nth-of-type(2) {
	transform: rotate(78.75deg);
}

#quad-3 > .dots-container .dots:nth-of-type(even):before {
	background: var(--color-sand);
}

#quad-3 > .dots-container .dots:nth-of-type(odd):before {
	background: var(--color-cream);
}

#quad-3 > .dots-container:before {
	position: absolute;
	margin-top: calc(var(--inner-stroke-size) * -0.5);
	z-index: 99;
	transform: rotate(67.5deg);
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 0.5));
	height: var(--inner-stroke-size);
	background: var(--color-brown);
	border-top-right-radius: var(--inner-stroke-size);
	transform-origin: center left;
}

#quad-3 > #segment-2 {
	transform: skewX(45deg);
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	transform-origin: top left;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
	z-index: 100;
}

#quad-3 > #segment-2 #leg-container {
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	border-bottom-right-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
	background: ;
	transform: skewX(-45deg);
	background: var(--color-sand);
	z-index: 100;
}

#quad-3 > #segment-2 #tail {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	transform-origin: top left;
	transform: rotate(-45deg);
	border-bottom-right-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
}

#quad-3 > #segment-2 > #leg-container > #quad-3-spikes,
#quad-3 > #segment-2 > #leg-container > #quad-3-spikes:before,
#quad-3 > #segment-2 > #leg-container > #quad-3-spikes:after {
	position: absolute;
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: var(--inner-stroke-size);
	background: var(--color-brown);
	border-bottom-left-radius: var(--inner-stroke-size);
	transform-origin: center left;
	z-index: 106;
	top: 0;
	left: 0;
}

#quad-3 > #segment-2 > #leg-container > #quad-3-spikes {
	position: absolute;
	margin-top: calc(var(--inner-stroke-size) * -0.5);
	transform: rotate(22.5deg);
	overflow: visible;
}

#quad-3 > #segment-2 > #leg-container > #quad-3-spikes:before {
	transform: rotate(11.25deg);
}

#quad-3 > #segment-2 > #leg-container > #quad-3-spikes:after {
	transform: rotate(-11.25deg);
}

#quad-3 #segment-2 #tail:after {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	transform-origin: top left;
	transform: rotate(22.5deg);
	border-bottom: calc(var(--stroke-size) * 1.2) solid var(--color-teal);
	border-right: var(--stroke-size) solid var(--color-orange);
	border-bottom-right-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
}

#quad-3 #segment-2 #leg-container-inner {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	height: calc(var(--container-size) - calc(var(--inner-stroke-size) * 1.5));
	transform-origin: top left;
	transform: rotate(-45deg);
	border-bottom-right-radius: calc(
		var(--container-size) - calc(var(--inner-stroke-size) * 1.5)
	);
	z-index: 107;
}

#quad-3 #segment-2 #leg-container-inner > div {
	margin-left: calc(var(--inner-stroke-size) * 0.5);
	position: absolute;
	width: 0;
	bottom: 0;
}

#quad-3 #segment-2 #leg-container-inner #leg-front {
	border-top-right-radius: calc(var(--stroke-size) * 1.8);
	border-left: calc(var(--stroke-size) * 3) solid var(--color-brown);
	border-bottom: calc(var(--stroke-size) * 3) solid transparent;
	height: calc(var(--stroke-size) * 3);
	margin-bottom: calc(var(--stroke-size) * 1.2);
}

#quad-3 #segment-2 #leg-container-inner #leg-back {
	border-top-right-radius: calc(var(--stroke-size) * 1.25);
	border-left: calc(var(--stroke-size) * 2.5) solid var(--color-brown);
	border-bottom: calc(var(--stroke-size) * 2.5) solid transparent;
	height: calc(var(--stroke-size) * 2.5);
	margin-bottom: calc(var(--stroke-size) * 2.95);
}

#quad-3 #segment-2 #leg-container-inner > div:before {
	width: 0;
	right: 0;
	border-bottom: calc(var(--stroke-.........完整代码请登录后点击上方下载按钮下载查看