简单的页面特效--文字背景图漂浮

最新推荐文章于 2021-06-04 20:53:36 发布

OJoyha

最新推荐文章于 2021-06-04 20:53:36 发布

阅读量723

点赞数

分类专栏：练习文章标签：简单的页面特效

本文链接：https://blog.csdn.net/OJoyha/article/details/88625469

版权

练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文字背景图漂浮特效

今天新学习的一个页面特效，代码非常简单，只有短短的几行，不过效果很好，一般适用于网站的起始页。原理非常简单，主要有以下几个步骤。

首先设置一个div，写上要展示的内容，并将文字的颜色设置为透明。
给div设置一个背景图，将背景图样式设置为从文字内容切割，即background-clip：text。
开启一个计时器，每隔30ms，让背景图的position向左移动2px；
注意：background-clip有兼容性问题，使用谷歌浏览器需要在前面加上-webkit-；

 <style>
    div{
        font-size: 250px;
        font-weight: bold;
        background: url(img/云朵.jpg);
        color: transparent;
        text-align: center;
        /* 文字颜色设置透明 */
        -webkit-background-clip: text;
    }
    </style>
    <body>
    <div>ADMIN</div>
    <script>
    var oDiv = document.querySelector("div");
    var i=0;
    setInterval(function(){
        i-=2;
        oDiv.style.backgroundPosition = i+"px 0";
    },30)
    </script>
</body>

展示图：在这里插入图片描述没有截动态图，真实的效果是文字背后的云朵在移动。