HTML+CSS：花式加载

本文主要是介绍HTML+CSS：花式加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果演示

33-花式加载.gif

实现了一个动态加载文本效果，通过定义变量和应用动画效果来实现文本的动态展示。

Code

<div class="container"><h1>loading...</h1>
</div>

:root {--text-color: orangered; /* 定义文本颜色变量为橙红色 */--inner-stroke-color: white; /* 定义内部描边颜色变量为白色 */--outer-stroke-color: midnightblue; /* 定义外部描边颜色变量为深蓝色 */--shadow-color: midnightblue; /* 定义阴影颜色变量为深蓝色 */
}body {height: 100vh; /* 设置body元素高度为视口高度 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */font-family: 'Pacifico', cursive; /* 设置字体为'Pacifico'或cursive */
}body,
.container>h1 {margin: 0; /* 去除默认的margin */
}.container>h1 {position: relative; /* 设置相对定位 */font-size: 100px; /* 设置字体大小为100px */color: var(--text-color); /* 使用定义的文本颜色变量 */font-weight: normal; /* 设置字体为普通粗细 */line-height: 1; /* 行高为1 */text-transform: capitalize; /* 文本转换为首字母大写 */letter-spacing: 13px; /* 字母间距为13px */--text-stroke: 2px var(--inner-stroke-color); /* 定义文本描边 */-webkit-text-stroke: var(--text-stroke); /* 设置Webkit浏览器的文本描边样式 */text-stroke: var(--text-stroke); /* 设置文本描边样式 */animation: rise 1s ease-in-out infinite forwards; /* 应用上升动画效果 */
}@media screen and (max-width: 550px) {.container>h1 {font-size: 70px; /* 在小于550px宽度时，设置字体大小为70px */}
}.container>h1:after {content: 'loading...'; /* 添加文本内容为'loading...' */position: absolute; /* 设置绝对定位 */top: 0; /* 顶部对齐 */left: 0; /* 左侧对齐 */color: transparent; /* 文本颜色透明 */--text-stroke: 8px var(--outer-stroke-color); /* 定义外部描边 */-webkit-text-stroke: var(--text-stroke); /* 设置Webkit浏览器的文本描边样式 */text-stroke: var(--text-stroke); /* 设置文本描边样式 */z-index: -1; /* 设置层级为-1，位于文本下方 */animation: drop 1s ease-in-out infinite forwards; /* 应用下降动画效果 */
}@keyframes drop {0% {filter: drop-shadow(-5px -5px 0 var(--shadow-color)); /* 设置阴影效果初始状态 */}50% {filter: drop-shadow(5px 5px 0 var(--shadow-color)); /* 设置阴影效果中间状态 */}100% {filter: drop-shadow(-5px -5px 0 var(--shadow-color)); /* 设置阴影效果结束状态 */}
}@keyframes rise {0% {transform: translate(5px, 5px); /* 设置上升动画初始状态 */}50% {transform: translate(-5px, -5px); /* 设置上升动画中间状态 */}100% {transform: translate(5px, 5px); /* 设置上升动画结束状态 */}
}