利用CSS实现文字动态背景

最新推荐文章于 2025-04-22 12:47:36 发布

不会编程的小任

最新推荐文章于 2025-04-22 12:47:36 发布

阅读量3.1k

点赞数 2

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/aiyalhh/article/details/127884296

版权

html 专栏收录该内容

3 篇文章

订阅专栏

利用CSS实现文字动态背景

实现思路

1.我们要实现的是文字动态背景，那首先就应该想到在文字的基础上添加图片背景，然后利用文字范围进行裁剪，裁剪掉文字以外的背景，最后利用这个css3中的关键帧实现让图片动起来。
2、实现步骤
（1）给公共样式区域设置长宽，文字动态背景最好让文字的粗细更粗。我们可以通过一下代码设置文字的粗细

font-weight: 900;

（2）设置背景图片，以文本的格式裁剪背景图片

background: url(./4102d0a26ea37cd58f7c38e3e4cc7781.jpeg);

（3）通过 background-clip属性用来定义元素背景的裁剪区域

background-clip: text;

（4）以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉

-webkit-background-clip: text;

（5）最后在写一个关键帧（Keyframe），来设置背景的定位，从0%到100%，通过动画animation来实现。

animation: dynamic 5s infinite alternate linear;

第一个参数：是动画名称
第二个参数：持续时间必须带上时间单位
第三个参数：循环次数 infinite为无限循环，
第四个参数：alternate是动画先正常运行再反方向运行，并持续交替运行，
第五个参数：动画过渡方式 linear为线性过渡

附源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .text{
        width: 600px;
        font-size: 120px;
        font-weight: 900;
        background: url(./4102d0a26ea37cd58f7c38e3e4cc7781.jpeg);
        /* 通过 background-clip属性用来定义元素背景的裁剪区域 */
        background-clip: text;
        /* 以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉 */
        -webkit-background-clip: text;
        /* 字体设置透明 */
        color: transparent;
        /* animaton绑定动画 动画名 时间  infinite循环 alternate播放方式 linear 线性*/
        animation: dynamic 5s infinite alternate linear;
    }
    @keyframes dynamic {
        0%{
            background-position: 0%;
        }
        50%{
            background-position: 60%;
        }
        100%{
            background-position: 100%;
        }
    }
</style>
<body>
    <div class="text">JavaSript</div>
</body>
</html>

显示效果

在这里插入图片描述