div+js实现三维立体可调参数跑马灯效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+js实现三维立体可调参数跑马灯效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
	--color-dark: #1f1f1f;
	--color-light: #fff;
	--color-primary: #c9b39c;
	--color-primary-dark: #a68059;
	--color-primary-darker: #634d36;
	--color-accent: #423324;
	--gap-ratio: -0.05;
	--effective-frame-width: calc(
		(var(--zoetrope-radius, 50vw) * 2 * 3.14159 / 23) * (1 - var(--gap-ratio))
	);
	--frame-width: var(--effective-frame-width);
	--frame-height: var(--frame-width);
	--zoetrope-radius-outer: calc(var(--zoetrope-radius, 50vw) + 1vw);
	--zoetrope-spin-duration: 800ms;
}

*,
::after,
::before {
	border-style: solid;
	border-width: 0;
	box-sizing: border-box;
}

body {
	background: radial-gradient(
			circle,
			var(--color-primary) 0,
			var(--color-primary-dark) 50%,
			var(--color-primary-darker) 85%,
			var(--color-accent) 100%
		),
		radial-gradient(circle at 30% 20%, rgba(0, 0, 0, 0.15) 0, transparent 80%),
		radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.1) 0, transparent 90%);
	background-color: var(--color-primary);
	color: var(--color-accent);
	font-family: "Roboto", sans-serif;
	height: 100vh;
	line-height: 1.5;
	margin: 0;
	overflow: hidden;
	width: 100%;
}

.ambient-light-layer {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 800;
}

.ambient-light-layer,
.wrapper {
	height: 100%;
	pointer-events: none;
}

.wrapper {
	align-items: center;
	display: grid;
	justify-items: center;
	place-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.zoetrope {
	display: block;
	height: var(--zoetrope-radius, 50vw);
	perspective: 1000px;
	pointer-events: none;
	width: var(--zoetrope-radius, 50vw);
}

.zoetrope-base {
	display: block;
	transform: translateZ(var(--zoetrope-depth, -800vw))
		rotateX(var(--zoetrope-tilt, -90deg));
	transform-style: preserve-3d;
	transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

.zoetrope-base,
.zoetrope-drums {
	height: 100%;
	position: relative;
	width: 100%;
}

.zoetrope-drums {
	align-items: center;
	animation: spin var(--zoetrope-spin-duration) linear infinite;
	display: grid;
	justify-items: center;
	place-items: center;
	transform-style: preserve-3d;
}

.zoetrope-drum-inner,
.zoetrope-drum-outer {
	grid-area: 1/-1;
}

.zoetrope-drum-inner,
.zoetrope-drum-outer,
.zoetrope-slits,
.zoetrope-strip {
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	width: 100%;
}

.zoetrope-slits,
.zoetrope-strip {
	display: block;
}

.zoetrope-frame {
	backface-visibility: hidden;
	background: url(//repo.bfw.wiki/bfwrepo/images/paoma/willie.webp);
	background-position: calc(var(--index) * -100% / 23) 0;
	background-size: cover;
	height: var(--frame-height);
	transform: translate(-50%, -50%) rotateY(var(--ry))
		translateZ(calc(-1 * var(--zoetrope-radius, 50vw)));
}

.zoetrope-frame,
.zoetrope-slit {
	left: 50%;
	position: absolute;
	top: 50%;
	width: var(--frame-width);
}

.zoetrope-slit {
	backface-visibility: visible;
	background: linear-gradient(
			90deg,
			#000 40%,
			transparent 0,
			transparent 60%,
			#000 0
		),
		url(//repo.bfw.wiki/bfwrepo/images/paoma/slits.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	height: calc(var(--frame-height) * 1.75);
	transform: translate(-50%, -75%) rotateY(var(--ry))
		translateZ(var(--zoetrope-radius-outer));
}

@keyframes spin {
	from {
		transform: rotateY(1turn);
	}

	to {
		transform: rotateY(0deg);
	}
}

.controls-layer {
	display: block;
	position: fixed;
	right: 0.75rem;
	top: 0.75rem;
	z-index: 999;
}

.controls {
	background: rgba(0, 0, 0, 0.75);
	border-radius: 0.5rem;
	padding: 1rem;
	width: 11.25rem;
}

.control-group,
.controls {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

label {
	color: var(--color-light);
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.025rem;
	opacity: 0.5;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

input[type="range"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--color-primary-darker);
	border-radius: 0.125rem;
	cursor: pointer;
	height: 0.25rem;
	outline: none;
	pointer-events: auto;
	width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: var(--color-primary-dark);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 1rem;
	width: 1rem;
}

input[type="range"]::-moz-range-thumb {
	background: var(--color-primary-dark);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 1rem;
	width: 1rem;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--color-primary-darker);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M7 10l5 5 5-5z"/></svg>');
	background-position: calc(100% - 0.25rem) 50%;
	background-repeat: no-repeat;
	background-size: 1.25rem;
	border: 0;
	border-radius: 0;
	color: var(--color-light);
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 300;
	line-height: normal;
	margin: 1rem 0 0;
	opacity: 0.5;
	outline: none;
	padding: 0.5rem;
	text-transform: inherit;
	vertical-align: middle;
	width: 100%;
}

select::-moz-placeholder {
	color: var(--color-light);
	opacity: 0.5;
}

select::-moz-placeholder,
select::placeholder {
	color: var(--color-light);
	opacity: 0.5;
}

select:invalid {
	font-style: italic;
}

select:invalid,
select option {
	color: var(--color-light);
	opacity: 0.5;
}

select option {
	background-color: var(--color-primary-darker);
	font-style: normal;
	padding: 0.5rem;
}

select option:not([value]),
select option[value=""] {
	color: var(--color-light);
	font-style: italic;
	opacity: 0.5;
}

select:disabled {
	background-color: var(--color-primary-darker);
	color: var(--color-light);
	cursor: not-allowed;
	opacity: 0.5;
}

.resources-layer {
	bottom: 0;
	display: block;
	position: fixed;
	right: 0;
	z-index: 1000;
}

.resources {
	background: rgba(29, 29, 31, 0.75);
	display: grid;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 0.6875rem;
	font-weight: 300;
	grid-auto-flow: column;
	line-height: 1.3;
	padding: 0.5rem;
	pointer-events: auto;
}

.resources a {
	align-content: center;
	display: grid;
	justify-content: center;
	padding: 0 0.5rem;
	place-content: center;
}

.resources a,
.resources a:active,
.resources a:visited {
	color: hsla(0, 0%, 100%, 0.75);
}

.resources a:not(:first-child) {
	border-inline-start: 0.0625rem solid currentColor;
}
</style>


  
  
</head>

<body translate="no">
 
<div class="wrapper">
	<div class="zoetrope">
		<!-- Base of the zoetrope (stationary) -->
		<div class="zoetrope-base">
			<div class="zoetrope-drums">
				<!-- Inner drum (holds the animation strip) -->
				<div class="zoetrope-drum-inner">
					<!-- Animation strip (contains frames) -->
					<div class="zoetrope-strip">
						<div class="zoetrope-frame" style="--ry: 345deg; --index: 0;"></div>
						<div class="zoetrope-frame" style="--ry: 330deg; --index: 1;"></div>
						<div class="zoetrope-frame" style="--ry: 315deg; --index: 2;"></div>
						<div class="zoetrope-frame" style="--ry: 300deg; --index: 3;"></div>
						<div class="zoetrope-frame" style="--ry: 285deg; --index: 4;"></div>
						<div class="zoetrope-frame" style="--ry: 270deg; --index: 5;"></div>
						<div class="zoetrope-frame" style="--ry: 255deg; --index: 6;"></div>
						<div class="zoetrope-frame" style="--ry: 240deg; --index: 7;&q.........完整代码请登录后点击上方下载按钮下载查看