风

马黑黑

小辣椒 发表于 2022-6-3 20:47
原来黑黑也是会PS的，图图也是会制作的

哪里的话，我是被图图制作的

马黑黑

红影 发表于 2022-6-3 20:50
黑黑把进度条做成了风车的支架，构思真巧妙

嗯，草原上数不多，弄到啥都想用来做杆杆

小辣椒

马黑黑 发表于 2022-6-3 21:30
也挺好

是的，套用黑黑的最轻松，而且不会有错误

小辣椒

马黑黑 发表于 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
当心啊，做事不得毛毛躁躁的

马黑黑

小辣椒 发表于 2022-6-3 21:51
是啊，多一点元素多一点出彩

太多也不好

小九

这个好，又漂亮

马黑黑

小九 发表于 2022-6-3 22:00
这个好，又漂亮

晚上好

东篱闲人

俺乡下人太悲催了，啥代码都看不见，走了。。。

马黑黑

东篱闲人 发表于 2022-6-3 22:40
俺乡下人太悲催了，啥代码都看不见，走了。。。

1. <style>
   
2. 
   
3. .outer { left: -302px; width: 1200px; height: 642px; background: url('/data/attachment/forum/202206/03/202554cwbwx1787z1e3o0d.jpg') no-repeat; overflow: hidden; position: relative; }
   
4. .sky { position: absolute; width: inherit; height: 270px; background: url('/data/attachment/forum/202206/03/202728j87yxyk38w3cwc3g.png'); animation: cloud_fly 40s linear infinite; }
   
5. .outer meter { position: absolute; width: 100px; left: 50px; bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
   
6. .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; }
   
7. .btn::before { position: absolute; content: ''; left: calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px; background: darkgreen; border-radius: 0 100%; }
   
8. @keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
   
9. @keyframes btn_rot { to { transform: rotate(1turn); } }
   
10. </style>
    
11. 
    
12. <div class="outer">
    
13.         <div class="sky"></div>
    
14.         <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
    
15.         <div class="btn"></div>
    
16. </div>
    
17. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27698273.mp3" autoplay="autoplay" loop="loop"></audio>
    
18. 
    
19. <script>
    
20. 
    
21. let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');
    
22. 
    
23. aud.addEventListener('timeupdate', () => {
    
24.         meter.value = aud.currentTime / aud.duration * 100;
    
25. });
    
26. 
    
27. btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');
    
28. 
    
29. </script>
    

复制代码

东篱闲人

马黑黑 发表于 2022-6-4 10:28

这图片地址也不显示啊。。。。

马黑黑

东篱闲人 发表于 2022-6-4 10:41
这图片地址也不显示啊。。。。

云很淡很淡，用在有色彩的地方它就出来了