CSS3 文本内的泡沫漂浮动画

最新推荐文章于 2024-08-24 11:37:18 发布

huxiaoxiao.

最新推荐文章于 2024-08-24 11:37:18 发布

阅读量717

点赞数

分类专栏： css 文章标签：前端 css3

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121470296

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本文介绍如何利用CSS3的background-clip属性和关键帧动画来制作文字背景的泡沫漂浮效果。通过设置h1标签的样式，结合自定义的泡沫背景图片和动画关键帧，可以实现背景图片在文字上的移动，创造出文字仿佛被气泡包围的视觉效果。此技术适用于网页设计中的创意元素展示。

摘要由CSDN通过智能技术生成

用 css3 做出文字背景图泡沫样式漂浮效果

使用标签在页面上写出一句话，内容自定义

<body>
    <h1>happy!</h1>
</body>

在style标签里书写样式

      *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: aqua;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

设置整个页面的背景色，页面字体颜色，让文字垂直，水平居中，方便查看

设置 h1 的样式，把准备好的图片通过背景图方式，写在h1标签中

   h1{
            font-size: 200px;
            /* 文本转大写 */
            text-transform: uppercase;
            /* 字间距(文本之间的间距) */
            letter-spacing: 10px;
            background: url('./img/bubbles.png');
            /* 文字填充区域设置为透明 */
            -webkit-text-fill-color:transparent;
            -o-text-fill-color:transparent;
            -moz-text-fill-color:transparent;
            text-fill-color:transparent;
            /* 沿着文字区域 做背景裁剪 */
            -webkit-background-clip: text;
            /* 做背景移动(css3 的动画效果) 
            background  动画名称
            12s         动画完成时间
            linear      速度--匀速
            infinite    无限循环播放
            */
            animation: background 12s linear infinite;
        }

在定义关键帧，通过关键帧做出具体效果

    /* 关键帧 */
        @keyframes background {
            from{
                background-position: 0 0;
            }
            to{
                background-position: 0 -300px;
            }
        }

注意：在@keyframes 后面跟的是在 h1 标签最后自定义的背景移动的动画名称，这样整体效果就做好了，查看一下结果：