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-sele.........完整代码请登录后点击上方下载按钮下载查看