停电了点蜡烛听歌

马黑黑

马黑黑

1. <style>
   
2. .wrapper {
   
3.         left: 100px;
   
4.         top: 100px;
   
5.         width: 30px;
   
6.         height: 200px;
   
7.         position: relative;
   
8.         cursor: pointer;
   
9. }
   
10. .candle {
    
11.         position: absolute;
    
12.         width: inherit;
    
13.         height: inherit;
    
14.         box-shadow: inset 0 0 1px 0 rgba(0,0,0,.35), 1px 1px 30px gray;
    
15.         background: linear-gradient(to right,#eee 1%,snow,#eee 99%);
    
16.         bottom: 0;
    
17. }
    
18. .candle::before ,.candle::after { position: absolute; content: ''; }
    
19. .candle::before {
    
20.         width: 40px;
    
21.         height: 40px;
    
22.         border-radius: 0 80%;
    
23.         background: linear-gradient(to left bottom, red 30%, #fff, red 70%);
    
24.         box-shadow: inset 2px 2px 4px yellow, inset 2px 2px 4px gold;
    
25.         top: -45px;
    
26.         left: -3px;
    
27.         transform: rotate(45deg);
    
28.         filter: blur(1px);
    
29.         animation: burn .5s ease-in-out infinite alternate;
    
30. }
    
31. .candle::after {
    
32.         width: 100%;
    
33.         height: 15px;
    
34.         background: inherit;
    
35. }
    
36. @keyframes burn { to { height: 50px; } }
    
37. 
    
38. </style>
    
39. 
    
40. 
    
41. <div class="wrapper">
    
42.         <div class="candle"></div>
    
43. </div>
    
44. <audio id="myaud" src="http://www.kumeiwp.com/sub/filestores/2022/05/14/def3513e7e61d2a3a6a946ef2906fc27.mp3" autoplay="autoplay" loop="loop"></audio>
    
45. 
    
46. <script>
    
47. 
    
48. let controler = document.querySelector('.candle');
    
49. let aud = document.querySelector('#myaud');
    
50. let task = aud.duration, current;
    
51. 
    
52. controler.onclick = () =>{
    
53.         aud.paused ? aud.play() : aud.pause();
    
54. }
    
55. 
    
56. aud.addEventListener('timeupdate', function(){
    
57.         task = aud.duration;
    
58.         current = aud.currentTime;
    
59.         setProgress(task,current);
    
60. });
    
61. 
    
62. function setProgress(tt,cc) {
    
63.         if(tt <= 0 || cc <= 0) return false;
    
64.         let prog = 100 - 100 * cc / tt;
    
65.         controler.style.height = prog + '%';
    
66. }
    
67. 
    
68. </script>
    

复制代码

加林森

老黑的这个蜡烛制作得真漂亮，还有火光在飘。

马黑黑

加林森 发表于 2022-5-23 12:33
老黑的这个蜡烛制作得真漂亮，还有火光在飘。

光晕做的太实了

加林森

马黑黑 发表于 2022-5-23 12:39
光晕做的太实了

漂亮得很啦

马黑黑

加林森 发表于 2022-5-23 12:41
漂亮得很啦

一般漂酿

加林森

马黑黑 发表于 2022-5-23 12:42
一般漂酿

不是哦，真的漂亮。

马黑黑

加林森 发表于 2022-5-23 12:43
不是哦，真的漂亮。

那就还行吧

加林森

马黑黑 发表于 2022-5-23 12:44
那就还行吧

当然啊。

马黑黑

加林森 发表于 2022-5-23 12:46
当然啊。

加林森

马黑黑 发表于 2022-5-23 12:51

开心就好！

红影

纯代码的图片，黑黑厉害，什么都能模拟

红影

这个原来也是进度条，歌曲唱完，蜡烛燃尽。很巧妙的构思

红影

这个好玩，让我点完了好几遍蜡烛

梦油

黑黑朋友教授的东西都很实用。我在祭奠飞机失事时就很想使用这样的蜡烛。

马黑黑

醉美水芙蓉 发表于 2022-5-23 16:57
太奇妙了！黑黑老师什么都可以制作！

这根蜡烛不够逼真，模拟一下，主要是要个功能

马黑黑

红影 发表于 2022-5-23 13:35
纯代码的图片，黑黑厉害，什么都能模拟

不太像

马黑黑

梦油 发表于 2022-5-23 15:20
黑黑朋友教授的东西都很实用。我在祭奠飞机失事时就很想使用这样的蜡烛。

嗯，它适合

马黑黑

红影 发表于 2022-5-23 13:50
这个好玩，让我点完了好几遍蜡烛

喜欢玩火