CSS 3.0实现时光轴加载动画

艾光远

已于 2025-03-17 00:02:30 修改

阅读量611

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 3.0网页特效文章标签：前端开发 CSS

于 2022-05-09 23:48:26 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/124678346

CSS 3.0网页特效专栏收录该内容

57 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用CSS 3.0创建一个时光轴加载动画。提供了具体的代码示例，适用于前端开发者进行复制和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给大家分享一个用CSS 3.0实现时光轴加载动画，效果如下：

以下是代码实现，欢迎大家复制、粘贴和收藏。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS 3.0实现时光轴加载动画</title>
    <style>
        html {
            height: 100%;
            background: linear-gradient(#813b97, #463c96);
        }

        @-webkit-keyframes progress1 {
            0% {
                transform: scalex(0);
                opacity: 0.5;
            }

            90% {
                transform: scalex(1);
                opacity: 1;
            }

            92% {
                transform