停电了点蜡烛听歌
<style>.wrapper {
left: 100px;
top: 100px;
width: 30px;
height: 200px;
position: relative;
cursor: pointer;
}
.candle {
position: absolute;
width: inherit;
height: inherit;
box-shadow: inset 0 0 1px 0 rgba(0,0,0,.35), 1px 1px 30px gray;
background: linear-gradient(to right,#eee 1%,snow,#eee 99%);
bottom: 0;
}
.candle::before ,.candle::after { position: absolute; content: ''; }
.candle::before {
width: 40px;
height: 40px;
border-radius: 0 80%;
background: linear-gradient(to left bottom, red 30%, #fff, red 70%);
box-shadow: inset 2px 2px 4px yellow, inset 2px 2px 4px gold;
top: -45px;
left: -3px;
transform: rotate(45deg);
filter: blur(1px);
animation: burn .5s ease-in-out infinite alternate;
}
.candle::after {
width: 100%;
height: 15px;
background: inherit;
}
@keyframes burn { to { height: 50px; } }
</style>
<div class="wrapper">
<div class="candle"></div>
</div>
<audio id="myaud" src="http://www.kumeiwp.com/sub/filestores/2022/05/14/def3513e7e61d2a3a6a946ef2906fc27.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let controler = document.querySelector('.candle');
let aud = document.querySelector('#myaud');
let task = aud.duration, current;
controler.onclick = () =>{
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 - 100 * cc / tt;
controler.style.height = prog + '%';
}
</script>
<style>
.wrapper {
left: 100px;
top: 100px;
width: 30px;
height: 200px;
position: relative;
cursor: pointer;
}
.candle {
position: absolute;
width: inherit;
height: inherit;
box-shadow: inset 0 0 1px 0 rgba(0,0,0,.35), 1px 1px 30px gray;
background: linear-gradient(to right,#eee 1%,snow,#eee 99%);
bottom: 0;
}
.candle::before ,.candle::after { position: absolute; content: ''; }
.candle::before {
width: 40px;
height: 40px;
border-radius: 0 80%;
background: linear-gradient(to left bottom, red 30%, #fff, red 70%);
box-shadow: inset 2px 2px 4px yellow, inset 2px 2px 4px gold;
top: -45px;
left: -3px;
transform: rotate(45deg);
filter: blur(1px);
animation: burn .5s ease-in-out infinite alternate;
}
.candle::after {
width: 100%;
height: 15px;
background: inherit;
}
@keyframes burn { to { height: 50px; } }
</style>
<div class="wrapper">
<div class="candle"></div>
</div>
<audio id="myaud" src="http://www.kumeiwp.com/sub/filestores/2022/05/14/def3513e7e61d2a3a6a946ef2906fc27.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let controler = document.querySelector('.candle');
let aud = document.querySelector('#myaud');
let task = aud.duration, current;
controler.onclick = () =>{
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 - 100 * cc / tt;
controler.style.height = prog + '%';
}
</script>
老黑的这个蜡烛制作得真漂亮，还有火光在飘。{:4_199:} 加林森 发表于 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
当然啊。
{:4_189:} 马黑黑 发表于 2022-5-23 12:51
开心就好！{:4_174:} 纯代码的图片，黑黑厉害，什么都能模拟{:4_187:} 这个原来也是进度条，歌曲唱完，蜡烛燃尽。很巧妙的构思{:4_199:} 这个好玩，让我点完了好几遍蜡烛{:4_189:} 黑黑朋友教授的东西都很实用。我在祭奠飞机失事时就很想使用这样的蜡烛。 醉美水芙蓉 发表于 2022-5-23 16:57
太奇妙了！黑黑老师什么都可以制作！
这根蜡烛不够逼真，模拟一下，主要是要个功能 红影 发表于 2022-5-23 13:35
纯代码的图片，黑黑厉害，什么都能模拟
不太像{:5_109:} 梦油 发表于 2022-5-23 15:20
黑黑朋友教授的东西都很实用。我在祭奠飞机失事时就很想使用这样的蜡烛。
嗯，它适合 红影 发表于 2022-5-23 13:50
这个好玩，让我点完了好几遍蜡烛
喜欢玩火{:5_117:}