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