scroll-out+splitting实现滚动网页文字单词拆分滚动动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：scroll-out+splitting实现滚动网页文字单词拆分滚动动画代码

代码标签： scroll-out splitting 滚动网页文字单词拆分滚动动画

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


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

<head>

  <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">
<link rel='stylesheet' href='https://unpkg.com/open-props/open-props.min.css'><link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.css"><link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/colors-hsl.min.css">
  
<style>
:root {
        --color: var(--gray-0);
        --font-size: var(--font-size-fluid-3);
        --transition-speed: 0;
        --transition-step: 0;
}

*,
*:after,
*:before {
        box-sizing: border-box;
}

body {
        background: var(--gradient-1);
        display: grid;
        place-items: center;
        min-height: 100vh;
        font-family: 'Google Sans', sans-serif, system-ui;
        overflow: hidden;
        color: var(--gray-0);
}

ul {
        padding: 0;
        margin: 0;
        list-style-type: none;
        height: 100vh;
        width: 100vw;
        -ms-scroll-snap-type: y mandatory;
            scroll-snap-type: y mandatory;
        overflow: auto;
}

.sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
}

.effect {
        height: 100%;
        width: 100%;
        background: var(--blue-8);
        scroll-snap-align: center;
        display: grid;
        place-items: center;
        font-size: var(--font-size);
        font-weight: var(--font-weight-9);
        text-align: center;
        overflow: hidden;
        max-inline-size: 100%;
}

.effect > div {
        max-width: 15ch;
}

.effect:nth-of-type(n) {
        background: var(--pink-9);
}
.effect:nth-of-type(2n) {
        background: var(--green-9);
}
.effect:nth-of-type(3n) {
        background: var(--blue-9);
}
.effect:nth-of-type(4n) {
        background: var(--yellow-9);
}
.effect:nth-of-type(5n) {
        background: var(--grape-9);
}
.effect:nth-of-type(6n) {
        background: var(--red-9);
}
.effect:nth-of-type(7n) {
        background: var(--lime-9);
}
.effect:nth-of-type(8n) {
        background: var(--gray-9);
}

/* Util */
[data-scroll] .char {
        transition: all var(--transition-speed) calc((var(--char-index) + 1) * var(--transition-step));
}

/* Slots */
.slots {
        --color: var(--gray-0);
        --speed: 0.5s;
        --delay: var(--transition-speed);
        --size: var(--font-size-fluid-3);
        height: calc(var(--size) * 3);
        overflow: hidden;
}

.slots .char {
        text-transform: uppercase;
        color: var(--color);
        -webkit-animation: slots var(--speed) var(--delay) infinite linear;
                animation: slots var(--speed) var(--delay) infinite linear;
  text-shadow: 0 calc(var(--size) * -1) 0 var(--color),
    0 calc(var(--size) * -2) 0 var(--color),
    0 calc(var(--size) * -3) 0 var(--color),
    0 calc(var(--size) * 1) 0 var(--color),
    0 calc(var(--size) * 2) 0 var(--color),
    0 calc(var(--size) * 3) 0 var(--color);
}

.slots .char:nth-of-type(odd) {
        animation: slots calc(var(--speed) * 0.75) var(--delay) infinite linear reverse;
}

@-webkit-keyframes slots {
        to {
                transform: translate(0, calc(var(--size) * -1));
        }
}

@keyframes slots {
        to {
                transform: translate(0, calc(var(--size) * -1));
        }
}

/* Carousel  */
.carousel {
  height: var(--font-size);
  width: var(--font-size);
  text-transform: uppercase;
}

.carousel .word {
        transform-style: preserve-3d;
        transform: rotateX(-24deg) rotateY(0);
        height: 100%;
        width: 100%;
}

.carousel .char {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotateY(calc(((360 / var(--char-total)) * var(--char-index)) * 1deg)) translate(var(--font-size), 0);
}

.carousel [data-scroll="in"] {
        animation: carousel-spin calc(var(--transition-speed) * 8) infinite linear reverse;
}

@-webkit-keyframes carousel-spin {
        to {
                transform: rotateX(-24deg) rotateY(360deg);
        }
}

@keyframes carousel-spin {
        to {
                transform: rotateX(-24deg) rotateY(360deg);
        }
}

/* Bloat */
.bloat {
        display: grid;
        grid-auto-rows: auto;
}

.bloat .word {
        --chars: 5;
        --center: 2;
        display: grid;
        grid-template-columns: repeat(var(--chars), auto);
}

.bloat [data-scroll="in"] .char {
        -webkit-animation-delay: calc(var(--transition-speed) + (var(--word-index) * var(--transition-step)));
                animation-delay: calc(var(--transition-speed) + (var(--word-index) * var(--transition-step)));
        -webkit-animation-name: bloat;
                animation-name: bloat;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-duration: calc(2 * var(--transition-speed));
                animation-duration: calc(2 * var(--transition-speed));
}

.bloat .char {
        --offset: calc((var(--char-index) - (var(--chars) * var(--word-index))) - var(--center));
        transform: translate(0, 0);
}

@-webkit-keyframes bloat {
        50% {
    transform: translate(calc(var(--offset) * 150%), 0);
        }
}

@keyframes bloat {
        50% {
    transform: translate(calc(var(--offset) * 150%), 0);
        }
}

/* Roulette */
.roulette {
        position: relative;
}

.roulette [data-scroll="in"] {
        -webkit-animation: roulette calc(var(--transition-speed) * 8) var(--transition-speed) infinite linear;
                animation: roulette calc(var(--transition-speed) * 8) var(--transition-speed) infinite linear;
}
  
.roulette .word {
  height: var(--font-size);
  width: var(--font-size);
}

.roulette .char {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(calc((var(--char-index) * (360 / var(--char-total)) * 1deg))) translate(0, -150%);
}

@-webkit-keyframes roulette {
        to {
                transform: rotate(-360deg);
        }
}

@keyframes roulette {
        to {
                transform: rotate(-360deg);
        }
}

/* Hinged */

.hinged .char {
        --rotation: -180deg;
        transform-origin: 0 100%;
        transform: rotate(var(--rotation));
}

.hinged [data-scroll="in"] .char {
        --rotation: 0;
}
/* Mexican Wave */
.mexiwave [data-scroll="in"] .char {
        -webkit-animation: mexiwave var(--transition-speed) calc(var(--char-index) * var(--transition-step)) ease;
                animation: mexiwave var(--transition-speed) calc(var(--char-index) * var(--transition-step)) ease;
}

@-webkit-keyframes mexiwave {
  50% {
        transform: translate(0, -50%);
  }
}

@keyframes mexiwave {
  50% {
        transform: translate(0, -50%);
  }
}

/* Enter */
.enter .char {
        opacity: var(--opacity, 1);
        transform: translateY(var(--y, 0%));
}

.enter [data-scroll="out"] {
        --opacity: 0;
        --y: -150%;
}

/* Random */
.random .char {
        transition: transform var(--transition-speed) calc((var(--char-index) + 1) * var(--transition-speed));
}
.random [data-scroll=&qu.........完整代码请登录后点击上方下载按钮下载查看