【原创/教程/萌新向】手把手教你给你的网站背景加上动态弥散光背景,网站档次瞬间提升

大家好,我是LouisonH,今天给大家带来一期网站背景教程。访问过我的个人主页的同学们应该都注意到,在我的个人主页背景有一层非常炫酷的动态弥散光效果(如图所示)

这也被称为Ledcell视觉效果,那么这究竟是怎么实现的呢?

其实原理很简单,就是将一张弥散光图片设置为页面背景,并通过代码使其不断旋转,便可形成如上图所示效果。在我的个人主页中,我使用了下图作为背景

那么说完了原理,我们应该如何实现这样的效果呢?

说到实现这个效果,我的第一个思路就是通过使用CSS的@keyframes关键帧规则和transform属性,实现图片的旋转效果,接着再使得图片填充背景,关键代码如下

 <style>
        body {
            background-image: url("background.png");
            background-size: cover;
            background-repeat: no-repeat;
            animation: rotate 20s infinite linear;
        }

        @keyframes rotate {
            0% {
                transform: scale(1) rotate(0deg);
            }
            100% {
                transform: scale(1.5) rotate(360deg);
            }
        }
    </style>

但是这样一来,页面的高度和宽度便会随着图片的旋转而变化,影响浏览体验的同时使得页面元素布局变动,无法达到我们预期的效果(如下图所示)

这个时候,我就想到,可以创建一个固定位置容器来放置图片,让他它占据了整个页面的宽度和高度,使用transform: translate(-50%, -50%)让其垂直和水平居中显示。图片通过scale(1.5)属性进行放大,并通过animation实现旋转效果,关键代码如下

<style>
        .container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .bg-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.5);
            animation: rotate 20s infinite linear;
        }

        @keyframes rotate {
            0% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) scale(1.5) rotate(360deg);
            }
        }
    </style>
    <div class="container">
        <img class="bg-image" src="background" alt="Background Image">
    </div>

以上代码确实可以实现图片旋转和旋转时 不影响界面大小,但是会有以下这个尴尬的效果

不是,这图片也忒小了吧。

不过这个时候,问题就比较好解决了,我们可以将背景图片元素的transform属性设置为translate(-50%, -50%) scale(2),我们将图片放大到一个较大的尺寸,即使在旋转过程中也能填充整个容器,关键代码如下

 <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }

        .bg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .bg-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2);
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
            animation: rotate 20s infinite linear;
        }

        @keyframes rotate {
            0% {
                transform: translate(-50%, -50%) scale(2) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -50%) scale(2) rotate(360deg);
            }
        }
    </style>
    <div class="bg-container">
        <img class="bg-image" src="background.png" alt="Background Image">
    </div>

在经过这么多遍的折腾后,终于成功了,效果如下

大家可以通过调整scale的值来控制放大的程度,修改CSS动画的animation-duration属性来实现控制背景的旋转速度,在上述代码中,我们使用了20s作为动画的持续时间,即20秒。你可以根据需要将该值调整为不同的数值,以改变旋转的速度。

接着,将代码插入我们的个人主页

炫酷的动态弥散光效果就做好啦!

大家可以把这串代码放在自己的个人主页,这逼格瞬间就上来了

那么,这篇文章的内容就这么多咯!

我是LouisonH(当然你们也可以叫我HansenL),我们下次再见咯!有不懂的小伙伴们可以在评论区留言哈

插播一条紧急新闻:LouisonHの博客开始招收友链啦!有兴趣的小伙伴可以在评论区留下自己博客的链接或前往【友链召集】本站开放友链啦!各位快来和我互换友链吧!,我们可以互相添加友链,扩大交友圈子~~~

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇