CSS3 文本内的泡沫漂浮动画

wangxinwang996

已于 2023-04-14 20:36:28 修改

阅读量599

点赞数

文章标签： css css3 html

于 2023-04-14 20:32:59 首次发布

本文链接：https://blog.csdn.net/wangxinwang996/article/details/130161539

版权

CSS3 文本内的泡沫漂浮动画

1.在body标签中，输入一个自定义标签 h1，里面输入文本

html:

<h1>happy!</h1>

2.css样式

如果我们希望h1标签在浏览器的水平方向和垂直方向，居中显示，我们需要给body标签设置弹性布局

display: flex;
justify-content: center;
align-items: center;

完整css代码如下所示：

css3:

    <style>
        /* @import 'https://fonts.googleapis.com/css?family=Rajdhani:700'; */
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            min-height: 100vh;
            background-color: lightskyblue;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        h1{
            font-size: 200px;
            /* 文本内容转大写 */
            text-transform: uppercase;
            /* 字间距 */
            letter-spacing: 20px;
            outline: 1px dashed red;
            background-image: url('./img/bubbles.png');
            /* 文本填充区域设置为透明 */
            -webkit-text-fill-color: transparent;
            -moz-text-fill-color: transparent;
            -o-text-fill-color: transparent;
            -ms-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; 
            }
        }
    </style>