加林森 发表于 2021-8-30 21:43

本帖最后由 加林森 于 2022-4-16 22:06 编辑 <br /><br />红影 发表于 2021-8-30 21:10
帖子做得也美，队长辛苦
谢谢表扬啊！{:4_171:}

<style>
.wrap {
        margin: auto; width: 720px; height: 1280px; left: -2px;
        background: url('https://pic.imgdb.cn/item/625ac72b239250f7c54405c4.jpg') no-repeat center/cover, url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat center/cover;
        background-blend-mode: screen, multiply; position: relative;
}
.img {
        position: absolute; top: 20px; left: 80px; width: 154px; height: 77px;
        filter: blur(1px); opacity: .65; animation: fly 20s linear infinite alternate;
}
/* 音乐控制按钮 */
.btn {
        width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
        filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素 按钮修饰 */
.btn::before {
        content: ''; position: absolute; width: 100%; height: 100%;
        background: #111 radial-gradient(circle at 35% 40%,rgba(255,255,255,.5), rgba(0,255,0,.3));
        background-blend-mode: difference; border-radius:50%; opacity: .35;
}
.pic { position: absolute; bottom: 10px; right: 10px; mix-blend-mode: luminosity;}
@keyframes fly { to { transform: translate(500px); } }
</style>

<div class="wrap">
        <img class="img" src="https://pic.imgdb.cn/item/6247dcc127f86abb2a49e093.gif" alt="" />
        <div class="btn"></div>
</div>

<script language="javascript">
let flag = true; // false = 不自动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/16/e0a574091f2e69339da6f202995e32ce.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
console.log(tt);
bgChange();
btn.onclick = function() {
        flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
                let c1 = `#${Math.random().toString(16).substr(-6)}`;
                let c2 = `#${Math.random().toString(16).substr(-6)}`;
                btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>

红影 发表于 2021-8-30 21:57

加林森 发表于 2021-8-30 21:43
谢谢表扬啊！

不客气{:4_187:}

加林森 发表于 2021-8-30 22:21

红影 发表于 2021-8-30 21:57
不客气
嗯嗯。

杨柳青 发表于 2021-9-4 21:59

加林森 发表于 2021-8-30 19:12
所以没事就敲敲你玩

看到你手能动就放心了~~{:4_196:}

加林森 发表于 2021-9-4 22:13

杨柳青 发表于 2021-9-4 21:59
看到你手能动就放心了~~

哈哈哈哈，皮小子！

杨柳青 发表于 2021-9-4 22:17

加林森 发表于 2021-9-4 22:13
哈哈哈哈，皮小子！

怎么感觉哈哈哈哈后面汗毛凛凛~~{:5_153:}

加林森 发表于 2021-9-4 22:30

杨柳青 发表于 2021-9-4 22:17
怎么感觉哈哈哈哈后面汗毛凛凛~~

你才知道？{:4_189:}

杨柳青 发表于 2021-9-4 22:37

加林森 发表于 2021-9-4 22:30
你才知道？

是啊~~也不是知道~~只是感觉~~你说呢~~{:5_115:}

加林森 发表于 2021-9-4 23:28

杨柳青 发表于 2021-9-4 22:37
是啊~~也不是知道~~只是感觉~~你说呢~~

不想挨揍你自己就小心了

杨柳青 发表于 2021-9-9 23:19

加林森 发表于 2021-9-4 23:28
不想挨揍你自己就小心了

哎~~老是挨揍~~{:5_153:}

加林森 发表于 2021-9-9 23:34

杨柳青 发表于 2021-9-9 23:19
哎~~老是挨揍~~

{:4_172:}

杨柳青 发表于 2021-9-12 21:30

加林森 发表于 2021-9-9 23:34


这是什么~~~~看你开心的样子~~~~{:5_115:}

加林森 发表于 2021-9-12 21:31

杨柳青 发表于 2021-9-12 21:30
这是什么~~~~看你开心的样子~~~~

难道你不高兴了？

杨柳青 发表于 2021-9-12 21:41

加林森 发表于 2021-9-12 21:31
难道你不高兴了？

好像有点~~~~{:4_196:}

加林森 发表于 2021-9-12 22:29

杨柳青 发表于 2021-9-12 21:41
好像有点~~~~

看你猪头在摇就想一把掌拍到你头上

杨柳青 发表于 2021-9-14 22:05

加林森 发表于 2021-9-12 22:29
看你猪头在摇就想一把掌拍到你头上

好啊~~拍死猪头有猪头肉吃~~最喜欢吃猪耳朵~~零食~~

加林森 发表于 2021-9-14 22:06

杨柳青 发表于 2021-9-14 22:05
好啊~~拍死猪头有猪头肉吃~~最喜欢吃猪耳朵~~零食~~

你猪头不怕啊？{:4_170:}

杨柳青 发表于 2021-9-14 22:20

加林森 发表于 2021-9-14 22:06
你猪头不怕啊？

看惯了不怕~~你吃猪眼睛哦~~{:5_105:}

加林森 发表于 2021-9-14 23:49

本帖最后由 加林森 于 2021-10-14 22:05 编辑

杨柳青 发表于 2021-9-14 22:20
看惯了不怕~~你吃猪眼睛哦~~
我吃你 ？{:4_172:}

页: 1 2 3 [4]
查看完整版本: 孤单巴黎 TO：大猫咪