《缥缈仙境》TO马黑黑（学习黑黑《自然之声》代码效果）
<style>#mydiv {margin: 130px 0 30px calc(50% - 681px);width: 1200px;height: 675px;background: url('https://s3.bmp.ovh/imgs/2024/07/08/24d7047f7a2b4133.jpg') no-repeat center/cover;box-shadow: 0 0 10px rgba(0,0,0,.5);overflow: hidden; border-radius: 20px;z-index: 1;position: relative;}#mydiv:hover #player { opacity: .8;}#mydiv::before, #mydiv::after {position: absolute;content: '';}#mydiv::before {inset: -305px;background: radial-gradient(circle, transparent, rgba(68,98,15,.35), transparent) center / 30% 30%;transform: rotate(0deg);animation: bgsize 8s infinite alternate var(--state);}#mydiv::after {inset: 0;background: linear-gradient(to right, transparent, rgba(56,88,9,.3), transparent, rgba(86,145,34,.3), transparent) 0 0/200% 100%;animation: bgmove 4s infinite alternate var(--state);}#player {position: absolute;width: 240px;left: calc(50% - 100px);bottom: 20px;mix-blend-mode: normal;transition: 1s;opacity: .3;cursor: pointer; z-index: 10;}@keyframes bgmove { to { background-position: -200% 0;} }@keyframes bgsize {to { transform: rotate(360deg); background-size: 50% 50%;}}</style><div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2099332217" autoplay loop></audio><img id="player" src="https://pic.imgdb.cn/item/669d1f4ed9c307b7e9ed943d.png" alt="" title="播放/暂停" /></div>
<script>aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 试试换个背景径向渐变是否仍适合，感觉也挺适合。同时加了墨家神机里的横向渐变。
黑黑研究实时着色辛苦了，请入仙境喝茶@马黑黑 {:4_187:} 学习了一下合并代码，发现全选后全部合并，发出的帖子就不会自动播放了，只能是分开来各自合并了{:4_173:} 奇怪的是，试贴时候全部合并起来是可以的，发到论坛才不动的{:4_173:} 画面很美
https://5b0988e595225.cdn.sohucs.com/images/20191223/1357bb8329ac48efa9b04ce3f48d2464.gif 图美音乐美，欣赏老师佳作！ 这里看着凉快，天太热了，也想进去游游{:4_171:} 这可是个最理想的避暑胜地，我看着这件作品，一时觉得全身凉爽了许多。 这图好！想进去坐坐！{:4_187:} 红影 发表于 2024-7-21 23:36
试试换个背景径向渐变是否仍适合，感觉也挺适合。同时加了墨家神机里的横向渐变。
黑黑研究实时着色辛苦了 ...
来了来了
哎呀，该来的没来 {:4_170:} 起个网名好难 发表于 2024-7-22 07:20
画面很美
谢谢难难的鼓励和好图，新周快乐{:4_187:} 海笑 发表于 2024-7-22 07:28
图美音乐美，欣赏老师佳作！
谢谢海笑，能得到肯定很开心{:4_187:} 竹溪 发表于 2024-7-22 08:54
这里看着凉快，天太热了，也想进去游游
欢迎竹溪一起进去品茶{:4_187:} 梦油 发表于 2024-7-22 09:20
这可是个最理想的避暑胜地，我看着这件作品，一时觉得全身凉爽了许多。
太好了，能让梦油感觉舒适，还是很开心的{:4_187:} 梦江南 发表于 2024-7-22 09:58
这图好！想进去坐坐！
欢迎梦江南一起去品茶{:4_187:} 马黑黑 发表于 2024-7-22 12:27
来了来了
哎呀，该来的没来
黑黑辛苦了，看你钻研了那么久，赶紧歇歇{:4_190:} 红影 发表于 2024-7-22 22:56
黑黑辛苦了，看你钻研了那么久，赶紧歇歇
没有呀，最近都没啥空闲时间 红影 发表于 2024-7-22 22:54
欢迎竹溪一起进去品茶
云雾缥缈，在里面喝完了会不会成仙啊{:5_117:} 马黑黑 发表于 2024-7-22 23:27
没有呀，最近都没啥空闲时间
但黑黑带来的代码效果还是源源不绝，真不容易{:4_199:} 竹溪 发表于 2024-7-23 09:33
云雾缥缈，在里面喝完了会不会成仙啊
有这可能{:4_170:}
页:
[1]
2