div+css实现文字loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现文字loading加载动画效果代码
代码标签: 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-loader-1 {
0%, 10%, 90%, 100% {
scale: 0;
}
20%, 75% {
scale: 1;
}
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes uia-text-loader-1 {
0%, 10%, 90%, 100% {
opacity: 0;
}
20%, 75% {
opacity: 1;
}
}
}
/* type 2 */
[data-uia-text-loader-type="uia-text-loader-type-2"] .uia-text-loader__letter-placeholder {
animation-name: uia-text-loader-2;
}
@keyframes uia-text-loader-2 {
0%, 10%, 90%, 100% {
opacity: 0;
}
11%, 55% {
opacity: 1;
}
}
/* type 3 */
[data-uia-text-loader-type="uia-text-loader-type-3"] .uia-text-loader__letter-placeholder {
animation-name: uia-text-loader-3;
}
@media (prefers-reduced-motion: no-preference) {
@keyframes uia-text-loader-3 {
0%, 10%, 90%, 100% {
transform: rotateY(-90deg);
opacity: 0;
}
15% {
opacity: .5;
}
20%, 75% {
transform: rotateY(0);
opacity: 1;
}
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes uia-text-loader-3 {
0%, 10%, 90%, 100% {
opacity: 0;
}
20%, 75% {
opacity: 1;
}
}
}
/*
=====
ANIMATION DELAY
=====
*/
/*
If your text differs from "Loading" you should create styles that
define the animation delay for each letter.
Use the --uia-text-loader-animation-delay option. You need set the letter
number as the first argument inside the calc() function.
The --uia-text-loader-delay-step is the delay will increase on that value.
The default value is 0.2s. If you wanna change it define the new value.
EXAMPLE
.uia-text-loader__letter {
--uia-text-loader-de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0