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

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

代码语言：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%;
	positio.........完整代码请登录后点击上方下载按钮下载查看