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