火烧云
<style>
.outer { left: -250px; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/632aff5716f2c2beb128db1a.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('https://pic.imgdb.cn/item/632aff8b16f2c2beb1291536.png'); animation: cloud_fly 40s linear infinite; }
.outer meter { position: absolute; width: 100px; left: 50px; bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 60px; bottom: 110px; width: 80px; height: 10px; background: #ffff7e; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left: calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px; background: #ffff7e; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
</style>
<div class="outer">
<div class="sky"></div>
<meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
<div class="btn"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=5253684.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');
aud.addEventListener('timeupdate', () => {
meter.value = aud.currentTime / aud.duration * 100;
});
btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');
</script> 哇，还真的是红云呢，咋给清舟找到的这样颜色的云啊{:4_173:} 文字也很有特色，跟火焰字很像{:4_187:} 红影 发表于 2022-9-21 20:38
哇，还真的是红云呢，咋给清舟找到的这样颜色的云啊
把白云改变一下色想饱和度，就变成红的了 红影 发表于 2022-9-21 20:39
文字也很有特色，跟火焰字很像
现学的火焰字了{:4_189:} 这是红霞满天的节奏{:4_204:} 绿叶清舟 发表于 2022-9-21 20:44
把白云改变一下色想饱和度，就变成红的了
哦哦，还以为直接找到红色的云呢{:4_173:} 绿叶清舟 发表于 2022-9-21 20:45
现学的火焰字了
哦，真有火焰字啊。 红影 发表于 2022-9-21 21:05
哦，真有火焰字啊。
是啊，用PS制作很简单的 红影 发表于 2022-9-21 21:05
哦哦，还以为直接找到红色的云呢
这个真的找不到了{:4_189:} 云中子 发表于 2022-9-21 20:46
这是红霞满天的节奏
明天是个好天气了{:4_189:} 绿叶清舟 发表于 2022-9-21 21:09
是啊，用PS制作很简单的
简直是眼馋我啊，我不会PS{:4_173:} 绿叶清舟 发表于 2022-9-21 21:09
这个真的找不到了
就是啊，怎么可能有这么怪颜色的呢，原来是清舟自己做出来的呢，厉害{:4_187:} 红影 发表于 2022-9-21 21:42
简直是眼馋我啊，我不会PS
安装一个啊，很简单的{:4_189:} 烧的好红，很赞 马黑黑 发表于 2022-9-21 21:47
烧的好红，很赞
把你的云烤红的 绿叶清舟 发表于 2022-9-21 21:48
把你的云烤红的
挺好挺好 红影 发表于 2022-9-21 21:43
就是啊，怎么可能有这么怪颜色的呢，原来是清舟自己做出来的呢，厉害
等闲了俺把制作过程发了来 好美的火烧云哎！ 绿叶清舟 发表于 2022-9-21 21:46
安装一个啊，很简单的
反正也学不会，还是算了，不折腾了。