风
<style>.outer { left: -302px; width: 1200px; height: 642px; background: url('/data/attachment/forum/202206/03/202554cwbwx1787z1e3o0d.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('/data/attachment/forum/202206/03/202728j87yxyk38w3cwc3g.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: green; 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: darkgreen; 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="https://music.163.com/song/media/outer/url?id=27698273.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>
云彩真漂亮！{:5_116:} 东篱闲人 发表于 2022-6-3 20:33
云彩真漂亮！
我让云走的快了一点，时间应该加倍 马黑黑 发表于 2022-6-3 20:34
我让云走的快了一点，时间应该加倍
{:4_187:} 东篱闲人 发表于 2022-6-3 20:36
谢谢支持 黑黑真的是佩服极了，这个云飘css制作出来了{:4_178:} 逼真的效果，真的美极了 小辣椒 发表于 2022-6-3 20:39
逼真的效果，真的美极了
这都是图片弄的 马黑黑 发表于 2022-6-3 20:40
这都是图片弄的
这个图片弄的？我看看代码 小辣椒 发表于 2022-6-3 20:40
这个图片弄的？我看看代码
嗯，云，草原，都是图片 马黑黑 发表于 2022-6-3 20:42
嗯，云，草原，都是图片
看了，黑黑你太棒了{:4_178:} 小辣椒 发表于 2022-6-3 20:43
看了，黑黑你太棒了
这都是很基本的CSS+h5的东东了 马黑黑 发表于 2022-6-3 20:44
这都是很基本的CSS+h5的东东了
自己编程我根本不会的，就套用黑黑的{:4_173:} 原来黑黑也是会PS的，图图也是会制作的 黑黑把进度条做成了风车的支架，构思真巧妙{:4_187:} 广阔的草原，悠悠的白云，让人心旷神怡{:4_187:} 刚才去做事了，还把手夹出血了。就一会老黑又出新的啦。我得好好学习了。回归草原，我喜欢的。 加林森 发表于 2022-6-3 21:24
刚才去做事了，还把手夹出血了。就一会老黑又出新的啦。我得好好学习了。回归草原，我喜欢的。
当心啊，做事不得毛毛躁躁的 小辣椒 发表于 2022-6-3 20:45
自己编程我根本不会的，就套用黑黑的
也挺好 红影 发表于 2022-6-3 20:51
广阔的草原，悠悠的白云，让人心旷神怡
风景很美的