侧边栏壁纸

背景气泡

2024年03月15日 148阅读 0评论 2点赞

再水一群教程

效果图:

演示

不多说老规矩代码如下:

css代码如下:

/*背景图片*/
body:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url(https://vi2.xiu123.cn/live/2023/10/18/21/1001v1697636328652330460.jpg) center 0 no-repeat;
    background-size:cover;
}
/* 背景泡泡 */
body {
    position:relative;
    overflow-x:hidden;
    height:100vh;
}
guigui {
    position:absolute;
    bottom:0;
    background:radial-gradient(circle at 72% 28%,#fff 3px,#ff7edf 8%,#5b5b5b,#aad7f9 100%);
    box-shadow:inset 0 0 6px #fff,inset 3px 0 6px #eaf5fc,inset 2px -2px 10px #efcde6,inset 0 0 60px #f9f6de,0 0 20px #fff;
    border-radius:50%;
    animation:guigui 4s linear infinite;
    transition:2s;
    z-index:1;
}
@keyframes guigui {
    0% {
    transform:translateY(0%);
    opacity:1;
}
50% {
    transform:translate(10%,-1000%);
}
75% {
    transform:translate(-20%,-1200%);
}
99% {
    opacity:.9;
}
100% {
    transform:translateY(-1800%) scale(1.5);
    opacity:0;
}
}
  • js代码如下:
// 定时背景随机气泡
const bubleCreate = () => {
    const body = document.body
    const buble = document.createElement('guigui')
    let r = Math.random() * 5 + 25 //25~30
    buble.style.width = r + 'px'
    buble.style.height = r + 'px'
    buble.style.left = Math.random() * innerWidth + 'px'
    body.append(buble)
    setTimeout(() => {
        buble.remove()
    }, 4000)
}
setInterval(() => {
    bubleCreate()
}, 200);
2
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
博主栏壁纸
24 文章数
8 标签数
16 评论量
说辞
坚持每天来逛逛,会让你
生活也美好了!
心情也舒畅了!
走路也有劲了!
腿也不痛了!
腰也不酸了!
工作也轻松了!
你好我也好,不要忘记哦!
舔狗日记