卡通刺猬加载滚动动画效果代码-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-.........完整代码请登录后点击上方下载按钮下载查看