加林森 发表于 2022-4-16 22:11

《我没醉》 -- 李娅


<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>

加林森 发表于 2022-4-16 22:11

我没醉 - 李娅

啊 我没醉

我没醉

今夜我还没醉

是你先醉

才会不知我是谁

说什么永不后悔

说什么只爱我一人

只爱我一人

这样的花言巧语

已经觉得无所谓

你永远别想挽回

啊 我没醉

我没醉

今夜我还没醉

我没醉 啊 我没醉

是你先醉

才会不知我是谁

说什么永不后悔

说什么只爱我一人

只爱我一人

这样的花言巧语

已经觉得无所谓

你永远别想挽回

不知我是谁

说什么永不后悔

说什么只爱我一人

只爱我一人

这样的花言巧语

已经觉得无所谓

你永远别想挽回

啊 我没醉

马黑黑 发表于 2022-4-16 22:16

没醉继续喝

来看你 发表于 2022-4-16 22:51

多喝几杯 {:5_106:}

来看你 发表于 2022-4-16 22:52

有两只蝴蝶喝趴了

大猫咪 发表于 2022-4-16 22:54

好声音，好音乐，尽在怀旧经典{:5_106:}队长这制作好棒！ 赞！！！

{:4_204:}{:4_199:}

大猫咪 发表于 2022-4-16 22:55

队长没醉， 猫醉了{:5_117:}{:4_179:}

加林森 发表于 2022-4-16 23:00

马黑黑 发表于 2022-4-16 22:16
没醉继续喝

哈哈，继续喝。。。我改变了这个行不行啊？

加林森 发表于 2022-4-16 23:01

来看你 发表于 2022-4-16 22:51
多喝几杯

看看喝点。。。{:4_189:}

加林森 发表于 2022-4-16 23:01

来看你 发表于 2022-4-16 22:52
有两只蝴蝶喝趴了

还能飞就没有醉。{:4_189:}

加林森 发表于 2022-4-16 23:03

大猫咪 发表于 2022-4-16 22:54
好声音，好音乐，尽在怀旧经典队长这制作好棒！ 赞！！！

玩的玩的，好玩的。谢谢猫猫！{:4_204:}{:4_179:}

来看你 发表于 2022-4-16 23:05

加林森 发表于 2022-4-16 23:01
看看喝点。。。

{:4_191:} 好，反正我没醉

加林森 发表于 2022-4-16 23:09

来看你 发表于 2022-4-16 23:05
好，反正我没醉

好的好的，都没有醉！{:4_191:}

加林森 发表于 2022-4-16 23:16

大猫咪 发表于 2022-4-16 22:55
队长没醉， 猫醉了

哈哈，猫猫肯定更加能喝的。

红影 发表于 2022-4-17 09:15

队长真勤奋，又是一个特别按钮呢。这个做得漂亮，两只静态蝶，两只动态的，外加个行走移动的，真美{:4_187:}

加林森 发表于 2022-4-17 16:40

红影 发表于 2022-4-17 09:15
队长真勤奋，又是一个特别按钮呢。这个做得漂亮，两只静态蝶，两只动态的，外加个行走移动的，真美{:4_187: ...

嗯嗯，我是试一试能不能调整的。

红影 发表于 2022-4-18 15:31

加林森 发表于 2022-4-17 16:40
嗯嗯，我是试一试能不能调整的。

这个做得很漂亮{:4_187:}

加林森 发表于 2022-4-18 17:05

红影 发表于 2022-4-18 15:31
这个做得很漂亮

嗯嗯，谢谢！{:4_204:}
页: [1]
查看完整版本: 《我没醉》 -- 李娅