如今,动画是应用程序中吸引更多用户最有力的功能,它增加了用户探索应用程序的兴趣。在 Web 应用程序中,我们可以使用 HTML 和 CSS 创建动画。然而,我们可以使用 JavaScript 创建动画,但这会使网站变慢。
在本教程中,我们将学习使用 HTML 和 CSS 加载文本动画。在从 API 获取数据或加载网页时,用动画显示加载文本非常重要,以使其更具吸引力。
在下面的示例中,我们在其中创建了“loader”div 和“loader-inner”div 元素。在 CSS 中,我们为加载器 div 设置固定尺寸,并使用“旋转”关键帧添加动画。我们设置 3 秒的动画时间。
此外,我们还为 loader-inner div 元素和 loader div 元素内的位置设置了内部旋转关键帧。
在“旋转”和“内部旋转”关键帧中,我们将加载器从 0 度移动到 360 度。用户可以在输出中观察旋转加载器,中间有加载文本。
<html> <head> <style> .loader { width: 100px; height: 100px; border-radius: 50%; border: 6px dotted green; position: relative; animation: rotation 3s linear infinite; } .loader-inner { position: absolute; width: 70px; height: 70px; border-radius: 50%; border-block: 6px solid yellow; top: 10px; left: 10px; animation: rotation-inner 3s linear infinite; } .loader-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes rotation { from { transform: rotate(0deg);} to { transform: rotate(360deg);} } @keyframes rotation-inner { from { transform: rotate(0deg);} to {transform: rotate(360deg);} } </style> </head> <body> <h2>Creating the <i> Loading text animation using the CSS </i></h2> <div class = "loader"> <div class = "loader-inner"> </div> <div class = "loader-text"> Loading </div> </div> </body> </html>
在下面的示例中,我们创建了加载栏。在这里,我们在其中创建了 loader div 元素和 bar div 元素。我们已经在 CSS 中设置了 loader div 元素的尺寸和 bar 元素的动画。
我们使用“bar-animation”关键帧来制作动画。在“bar-animation”中,我们更改了 div 元素的宽度,使其像加载栏一样。
<html> <head> <style> .container { width: 200px; } .loader { width: 200px; height: 15px; position: relative; overflow: hidden; border: 2px solid blue; border-radius: 5px; } .bar { width: 0%; height: 100%; background-color: green; animation: bar-animation 5s ease-in-out infinite; } span { font-size: 1.3rem; display: flex; justify-content: center; color: green; } @keyframes bar-animation { 0% {width: 0%;} 50% {width: 100%;} 100% {width: 0%;} } </style> </head> <body> <h2>Creating the <i> Loading text animation using the CSS. </i> </h2> <div class = "container"> <div class = "loader"> <div class = "bar"> </div> </div> <span> Loading </span> </div> </body> </html>
在下面的示例中,我们创建了弹跳加载文本。在这里,我们将 Loading 单词的每个字符添加到单独的 div 元素中。之后,我们使用“动画”关键帧来为所有角色制作动画。在“动画”关键帧中,我们更改角色的垂直位置。
此外,我们还使用了“n-th-child()”方法来一一访问所有 div 元素并设置动画延迟。在输出中,用户可以观察弹跳的加载文本。
<html> <head> <style> .char { font-size: 44px; color: blue; display: inline-block; transition: all 0.9s; animation: animate 1.5s infinite; } .char:nth-child(1) {animation-delay: 0.1s;} .char:nth-child(2) {animation-delay: 0.3s;} .char:nth-child(3) {animation-delay: 0.4s;} .char:nth-child(4) {animation-delay: 0.5s;} .char:nth-child(5) {animation-delay: 0.6s;} .char:nth-child(6) {animation-delay: 0.8s;} .char:nth-child(7) {animation-delay: 0.9s;} .char:nth-child(8) {animation-delay: 1s;} .char:nth-child(9) {animation-delay: 1.2s;} .char:nth-child(10) {animation-delay: 1.4s;} @keyframes animate { 0% {transform: translateY(0);} 40% {transform: translateY(-20px);} 100% {transform: translateY(0);} } </style> </head> <body> <h2>Creating the <i> Loading text animation using the CSS. </i> </h2> <div class="allLetters"> <div class = "char"> L </div> <div class = "char"> o </div> <div class = "char"> a </div> <div class = "char"> d </div> <div class = "char"> i </div> <div class = "char"> n </div> <div class = "char"> g </div> <div class = "char"> . </div> <div class = "char"> . </div> <div class = "char"> . </div> </div> </body> </html>
在下面的示例中,我们在加载文本上添加了模糊效果。在这里,我们在单独的“span”元素中添加了加载词的每个字符。之后,我们使用‘n-th-child()’CSS方法一一访问每个span元素来添加动画。在 span 元素中,我们添加了具有特定动画延迟量的“模糊文本”动画。
在动画关键帧中,我们对文本应用模糊滤镜,以在加载文本上显示运行模糊效果。
<html> <head> <style> span {font-size: 2rem; color: green;} /* adding blur animation effect on each character of loading text one by one */ span:nth-child(1){animation: blur-text 4s ease-in-out infinite;} span:nth-child(2){animation: blur-text 4s ease-in-out infinite 0.3s;} span:nth-child(3){animation: blur-text 4s ease-in-out infinite 0.5s;} span:nth-child(4){animation: blur-text 4s ease-in-out infinite 0.9s;} span:nth-child(5){animation: blur-text 4s ease-in-out infinite 1.3s;} span:nth-child(6){animation: blur-text 4s ease-in-out infinite 1.6s;} span:nth-child(7){animation: blur-text 4s ease-in-out infinite 2s;} @keyframes blur-text { 0% {filter: blur(0px);} 50% {filter: blur(4px);} 100% {filter: blur(0px);} } </style> </head> <body> <h2>Creating the <i> Loading text animation using the CSS. </i> </h2> <div class = "allLetters"> <span> L </span> <span> O </span> <span> A </span> <span> D </span> <span> I </span> <span> N </span> <span> G </span> </div> </body> </html>
用户在本教程中学习了 4 种不同类型的加载动画。在第一个示例中,我们创建了带有文本的旋转加载指示器。在第二个示例中,我们创建了加载栏。此外,在第三个示例中,我们创建了弹跳加载文本,在最后一个示例中,我们为文本添加了模糊效果。
以上是使用 CSS 加载文本动画效果的详细内容。更多信息请关注PHP中文网其他相关文章!