📌  相关文章
📜  如何使用 HTML 和 CSS 创建加载模糊文本动画效果？(1)

📅  最后修改于: 2023-12-03 15:23:51.947000             🧑  作者: Mango

如何使用 HTML 和 CSS 创建加载模糊文本动画效果？

在web开发中，经常需要设计交互效果，其中之一就是加载动画效果。本文将介绍如何使用 HTML 和 CSS 创建一个简单的加载模糊文本动画效果。

HTML

首先先必须写好需要动画的DOM元素，这里我们提供一个简单的例子：

<div class="loading-text">
    Loading...
</div>
CSS

接着，定义CSS样式，包括字体、颜色、文本大小等等，参考如下：

.loading-text {
    font-family: Arial, sans-serif;
    font-size: 48px;
    color: #333;
}

接下来，实现模糊效果，可以使用CSS3提供的filter: blur()，代码如下：

.loading-text {
    font-family: Arial, sans-serif;
    font-size: 48px;
    color: #333;
    filter: blur(4px);
}

这样已经可以实现简单的模糊效果，但如果一直保持这个状态，动画的效果不够明显。因此，我们可以联想到一种动态的实现方式——透明度变化：

.loading-text {
    font-family: Arial, sans-serif;
    font-size: 48px;
    color: #333;
    filter: blur(4px);
    animation: blur 1s ease-in-out infinite;
}

@keyframes blur {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

通过animation属性，定义了一个名为blur的关键帧，包括了动画的三个状态：起点、途经点和终点，每个状态对应了一个透明度。上面代码中，animation指定了动画的时间为1秒钟，间隔为一次循环（infinite）。可以根据需要调整时间长度和循环次数。

最后，为了使页面更美观，可以为body添加一个背景颜色：

body {
    background-color: #f8f8f8;
}

至此，一个简单的加载模糊文本动画效果已经实现了！完整代码片段如下：

<!DOCTYPE html>
<html>
<head>
    <title>Loading Text Animation</title>
    <style>
        body {
            background-color: #f8f8f8;
        }
        .loading-text {
            font-family: Arial, sans-serif;
            font-size: 48px;
            color: #333;
            filter: blur(4px);
            animation: blur 1s ease-in-out infinite;
        }
        @keyframes blur {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="loading-text">
        Loading...
    </div>
</body>
</html>

现在，页面打开可以看到一个模糊的Loading文本，根据动态效果来描述“正在加载”状态。

参考链接：