div+css实现文字loading加载动画效果代码-html代码-BFW代码库

div+css实现文字loading加载动画效果代码

代码语言：html

代码描述：div+css实现文字loading加载动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

/*
=====
UIA-TEXT_LOADER
=====
*/

.uia-text-loader__text {
	font-family: var(--uia-text-loader-font-family, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif);
	font-size: var(--uia-text-loader-font-size, 1rem);
	text-transform: var(--uia-text-loader-text-transform, uppercase);
	color: var(--uia-text-loader-text-shadow, rgba(0, 0, 0, 0.2));

	user-select: var(--uia-text-loader-user-select, none);
}

.uia-text-loader__letter {
	display: var(--uia-text-loader-letter-display, inline-flex);
	position: relative;
}

.uia-text-loader__letter-placeholder {
	color: var(--uia-text-loader-letter-color, initial);

	position: absolute;
	inset: 0;

	animation-duration: var(--uia-text-loader-animation-duration, 5s);
	animation-iteration-count: var(--uia-text-loader-animation-iteration-count, infinite);
	animation-fill-mode: var(--uia-text-loader-animation-fill-mode, backwards);
	animation-delay: var(--uia-text-loader-animation-delay);
}

@media (forced-colors: active) {

    .uia-text-loader__text {
        --uia-text-loader-letter-color: var(--uia-text-loader-letter-color-forced, #fefefe);
        forced-color-adjust: none;
    }
}

/* type 1*/

[data-uia-text-loader-type="uia-text-loader-type-1"] .uia-text-loader__letter-placeholder {
	animation-name: uia-text-loader-1;
}

@media (prefers-reduced-motion: no-preference) {

	@keyframes uia-text-loa.........完整代码请登录后点击上方下载按钮下载查看