小辣椒 发表于 2022-6-3 20:47
原来黑黑也是会PS的，图图也是会制作的
哪里的话，我是被图图制作的
红影 发表于 2022-6-3 20:50
黑黑把进度条做成了风车的支架，构思真巧妙
嗯，草原上数不多，弄到啥都想用来做杆杆
马黑黑 发表于 2022-6-3 21:30
也挺好
是的，套用黑黑的最轻松，而且不会有错误{:4_189:}
马黑黑 发表于 2022-6-3 21:31
哪里的话，我是被图图制作的
看见你云的png了
小辣椒 发表于 2022-6-3 21:37
看见你云的png了
PNG过去的IE支持的不好，透明不会被承认。好在IE退休了
小辣椒 发表于 2022-6-3 21:34
是的，套用黑黑的最轻松，而且不会有错误
套用也是有讲究的
马黑黑 发表于 2022-6-3 21:39
套用也是有讲究的
是的，按图可以变化一下
马黑黑 发表于 2022-6-3 21:39
PNG过去的IE支持的不好，透明不会被承认。好在IE退休了
这种透明的云我有好几个
小辣椒 发表于 2022-6-3 21:42
这种透明的云我有好几个
我见过你上传过的
小辣椒 发表于 2022-6-3 21:41
是的，按图可以变化一下
还可以加入不同的元素
马黑黑 发表于 2022-6-3 21:43
还可以加入不同的元素
是啊，多一点元素多一点出彩
马黑黑 发表于 2022-6-3 21:28
当心啊，做事不得毛毛躁躁的
{:4_176:}
小辣椒 发表于 2022-6-3 21:51
是啊，多一点元素多一点出彩
太多也不好
这个好，又漂亮{:4_199:}
小九 发表于 2022-6-3 22:00
这个好，又漂亮
晚上好
俺乡下人太悲催了，啥代码都看不见，走了。。。{:5_103:}
东篱闲人 发表于 2022-6-3 22:40
俺乡下人太悲催了，啥代码都看不见，走了。。。
<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>
马黑黑 发表于 2022-6-4 10:28
这图片地址也不显示啊。。。。{:5_115:}
东篱闲人 发表于 2022-6-4 10:41
这图片地址也不显示啊。。。。
云很淡很淡，用在有色彩的地方它就出来了