【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果?

本文主要是介绍【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

英文 | https://www.geeksforgeeks.org/how-to-create-loading-blur-text-animation-effect-using-html-and-css/?ref=rp

翻译 | web前端开发

模糊文本动画被称为“烟熏效果”,用于为我们的文本提供模糊动画。本文在一个方向上线性模糊,然后重新出现。

方法:本文的方法非常简单。我们正在使用blur()函数对模糊效果进行动画处理。然后,我们使用第n个子属性来应用动画延迟。现在,让我们直接看一下代码。

HTML代码:我们创建了一个div元素,并将加载文本字符包装在span元素内。

<!DOCTYPE html> <html lang="en"> 
<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" />     <title>GeeksforGeeks</title> </head> 
<body>     <div class="geeks">         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>         <span>f</span>         <span>o</span>         <span>r</span>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>     </div> </body> 
</html>

CSS代码:

  • 步骤1:第一步很简单,我们将文本居中对齐并为我们的身体提供背景。

  • 步骤2:然后,我们提供了一个线性动画,其关键帧标识符为animate

  • 步骤3:现在我们使用关键帧将模糊功能应用于动画的不同帧。

  • 步骤4:最后一步是应用第n个子概念为每个角色提供动画延迟,以便在一个时间点只有一个角色变得模糊。

<style>     body {         margin: 0;         padding: 0;         background: green;     } .geeks {         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);         font-size: 30px;         font-weight: 800;         letter-spacing: 5px;     } .geeks span {         animation: animate 3s linear infinite;     } .geeks span:nth-child(1) {         animation-delay: 0s;     } .geeks span:nth-child(2) {         animation-delay: 0.1s;     } .geeks span:nth-child(3) {         animation-delay: 0.2s;     } .geeks span:nth-child(4) {         animation-delay: 0.3s;     } .geeks span:nth-child(5) {         animation-delay: 0.4s;     } .geeks span:nth-child(6) {         animation-delay: 0.5s;     } .geeks span:nth-child(7) {         animation-delay: 0.6s;     } .geeks span:nth-child(8) {         animation-delay: 0.9s;     } .geeks span:nth-child(9) {         animation-delay: 0.8s;     } .geeks span:nth-child(10) {         animation-delay: 0.9s;     } .geeks span:nth-child(11) {         animation-delay: 1s;     } .geeks span:nth-child(12) {         animation-delay: 1.1s;     } .geeks span:nth-child(13) {         animation-delay: 1.2s;     } @keyframes animate {         0% {             filter: blur(0);         } 40% {             filter: blur(20px);         } 80% {             filter: blur(0);         } 100% {             filter: blur(0);         }     } </style>

完整代码:在本节中,我们将结合以上两个部分来创建加载文本动画效果。

<!DOCTYPE html> <html lang="en"> 
<head>     <meta charset="UTF-8" />     <meta name="viewport" content=         "width=device-width, initial-scale=1.0" /> <title>Document</title>     <style>         body {             margin: 0;             padding: 0;             background: green;         } .geeks {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             font-size: 30px;             font-weight: 800;             letter-spacing: 5px;         } .geeks span {             animation: animate 3s linear infinite;         } .geeks span:nth-child(1) {             animation-delay: 0s;         } .geeks span:nth-child(2) {             animation-delay: 0.1s;         } .geeks span:nth-child(3) {             animation-delay: 0.2s;         } .geeks span:nth-child(4) {             animation-delay: 0.3s;         } .geeks span:nth-child(5) {             animation-delay: 0.4s;         } .geeks span:nth-child(6) {             animation-delay: 0.5s;         } .geeks span:nth-child(7) {             animation-delay: 0.6s;         } .geeks span:nth-child(8) {             animation-delay: 0.9s;         } .geeks span:nth-child(9) {             animation-delay: 0.8s;         } .geeks span:nth-child(10) {             animation-delay: 0.9s;         } .geeks span:nth-child(11) {             animation-delay: 1s;         } .geeks span:nth-child(12) {             animation-delay: 1.1s;         } .geeks span:nth-child(13) {             animation-delay: 1.2s;         } @keyframes animate {             0% {                 filter: blur(0);             } 40% {                 filter: blur(20px);             } 80% {                 filter: blur(0);             } 100% {                 filter: blur(0);             }         } </style> </head> 
<body>     <div class="geeks">         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>         <span>f</span>         <span>o</span>         <span>r</span>         <span>G</span>         <span>e</span>         <span>e</span>         <span>k</span>         <span>s</span>     </div> </body> 
</html>

输出:

这篇关于【开发小技巧】024—如何使用HTML和CSS创建加载模糊文本动画效果?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/612012

相关文章

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

Java使用HttpClient实现图片下载与本地保存功能

《Java使用HttpClient实现图片下载与本地保存功能》在当今数字化时代,网络资源的获取与处理已成为软件开发中的常见需求,其中,图片作为网络上最常见的资源之一,其下载与保存功能在许多应用场景中都... 目录引言一、Apache HttpClient简介二、技术栈与环境准备三、实现图片下载与保存功能1.

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma