红影 发表于 2022-1-25 22:02

加林森 发表于 2022-1-25 21:42
谢谢红影啊。

这个动图挺好的，很适合这首歌呢{:4_187:}

加林森 发表于 2022-1-25 22:04

本帖最后由 加林森 于 2022-4-15 21:45 编辑 <br /><br />红影 发表于 2022-1-25 22:02
这个动图挺好的，很适合这首歌呢
谢谢红影妹妹!

<style>
.wrap {
        margin: auto; width: 760px; height: 560px;
        background: url('https://pic.imgdb.cn/item/6259718d239250f7c52df841.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: 5px; top: 70px; 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 = 'https://music.163.com/song/media/outer/url?id=1459027007.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-1-25 22:13

队长这个太浪漫了{:4_187:}

小辣椒 发表于 2022-1-25 22:15

刘德华的歌，好听{:4_208:}

加林森 发表于 2022-1-25 22:16

小辣椒 发表于 2022-1-25 22:13
队长这个太浪漫了

哈哈哈哈，好玩的啊。

加林森 发表于 2022-1-25 22:17

小辣椒 发表于 2022-1-25 22:15
刘德华的歌，好听

喜欢就好啊。{:4_190:}

加林森 发表于 2022-1-25 22:24

东篱闲人 发表于 2022-1-25 21:21
帖子做的越来越帅了！

谢谢老兄支持！{:4_176:}

马黑黑 发表于 2022-1-25 22:43

加林森 发表于 2022-1-25 21:30
好哥们。

{:4_181:}

加林森 发表于 2022-1-25 22:47

马黑黑 发表于 2022-1-25 22:43


谢谢老黑！{:4_191:}

马黑黑 发表于 2022-1-26 19:18

加林森 发表于 2022-1-25 22:47
谢谢老黑！

阔气阔气

加林森 发表于 2022-1-26 19:19

马黑黑 发表于 2022-1-26 19:18
阔气阔气

开喝没有？

马黑黑 发表于 2022-1-26 19:56

加林森 发表于 2022-1-26 19:19
开喝没有？

喝了喝了

加林森 发表于 2022-1-26 20:10

马黑黑 发表于 2022-1-26 19:56
喝了喝了

那就好那就好

马黑黑 发表于 2022-1-26 21:05

加林森 发表于 2022-1-26 20:10
那就好那就好

挺好的

加林森 发表于 2022-1-26 21:15

马黑黑 发表于 2022-1-26 21:05
挺好的

嗯嗯
页: 1 [2]
查看完整版本: 《谢谢你的爱》 刘德华 送大家！