加林森 发表于 2022-4-15 21:51

《烟火散落》 -- 金玟岐

本帖最后由 加林森 于 2022-4-15 22:11 编辑 <br /><br /><style>
.wrap {
        margin: auto; width: 1080px; height: 721px; left: -242px;
        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: 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 = '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-4-15 21:51

@马黑黑帮着看看，跟你学的。

马黑黑 发表于 2022-4-15 22:14

加林森 发表于 2022-4-15 21:51
@马黑黑帮着看看，跟你学的。

上手快，不错哈

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

马黑黑 发表于 2022-4-15 22:14
上手快，不错哈

嗯嗯，谢谢你。就是那个蝴蝶有点问题。

马黑黑 发表于 2022-4-15 22:19

加林森 发表于 2022-4-15 22:16
嗯嗯，谢谢你。就是那个蝴蝶有点问题。

啥问题

加林森 发表于 2022-4-15 22:20

马黑黑 发表于 2022-4-15 22:19
啥问题

哪有倒着飞的？

马黑黑 发表于 2022-4-15 22:21

加林森 发表于 2022-4-15 22:20
哪有倒着飞的？

倒着飞的蝴蝶多了去

加林森 发表于 2022-4-15 23:27

马黑黑 发表于 2022-4-15 22:21
倒着飞的蝴蝶多了去

啊？我还真不知道的呢。

马黑黑 发表于 2022-4-15 23:30

加林森 发表于 2022-4-15 23:27
啊？我还真不知道的呢。

天下无奇不有

加林森 发表于 2022-4-15 23:34

马黑黑 发表于 2022-4-15 23:30
天下无奇不有

我真不知道啊。

红影 发表于 2022-4-15 23:41

队长这么快就做出来了，好棒{:4_199:}

红影 发表于 2022-4-15 23:43

这个帖子的动图点缀也很不错，真漂亮的制作{:4_187:}

加林森 发表于 2022-4-15 23:45

红影 发表于 2022-4-15 23:41
队长这么快就做出来了，好棒

谢谢红影！{:4_204:}

加林森 发表于 2022-4-15 23:45

红影 发表于 2022-4-15 23:43
这个帖子的动图点缀也很不错，真漂亮的制作

谢谢啊！{:4_204:}

马黑黑 发表于 2022-4-16 08:44

加林森 发表于 2022-4-15 23:34
我真不知道啊。

有空去云南我的老家看看蝴蝶

红芍药 发表于 2022-4-16 10:23

蝴蝶好看，歌曲好听，队长威武。。{:4_199:}{:4_199:}

小九 发表于 2022-4-16 11:37

队长学得快，蝴蝶很漂亮{:4_199:}

加林森 发表于 2022-4-16 12:29

红影 发表于 2022-4-15 23:41
队长这么快就做出来了，好棒

做出来了，看见三只小蝴蝶飞起来真开心。

加林森 发表于 2022-4-16 12:30

马黑黑 发表于 2022-4-16 08:44
有空去云南我的老家看看蝴蝶

好的好的，原来经常去的。

加林森 发表于 2022-4-16 12:31

红芍药 发表于 2022-4-16 10:23
蝴蝶好看，歌曲好听，队长威武。。

谢谢！{:4_190:}
页: [1] 2
查看完整版本: 《烟火散落》 -- 金玟岐