心灵与共（底板、文字及蜡烛等效果学习）
<style>.wrap {
position: relative;
width: 1060px;
height: 600px;
left: -232px;
top: 120px;
background: linear-gradient(135deg, #ffccff,#ffcc66, #99ff66);
}
.inner {
height: 100%;
background: #000;
filter: contrast(700%);
mix-blend-mode: multiply;
position: relative;
}
.inner::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: radial-gradient(#fff, transparent);
background-size: 20px 20px;
}
.wrapper {
left: 847px;
top: 340px;
width: 30px;
height: 220px;
position: absolute;
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; } }
.dText {
position: absolute;
left: 600px;
top: 56px;
width: 400px;
font: 60px / 60px Sans-serif;
color: #FFEBCD;
text-shadow: 2px 2px 4px #888;
animation: dance 2s ease-in-out infinite;
}
@keyframes dance {
to { font-weight: 900; font-style: italic; }
}
</style>
<div class="wrap">
<div class="inner"></div>
<div class="wrapper">
<div class="candle"></div>
</div>
<div class="dText">
<p>心灵与共-巫娜</p>
</div>
<div style="position: absolute; left:0px; top: 60px; width:650px; opacity: .95;">
<img alt="" src="https://pic.imgdb.cn/item/628df9a709475431297a89a1.gif"/></div>
<div style="position: absolute; left:300px; top: -20px; width:650px; ">
<img alt="" src="https://pic.imgdb.cn/item/628dfb4a09475431297cbda9.png"/></div>
</div><br><br><br><br><br><br>
<audio id="myaud" src="https://music.163.com/song/media/outer/url?id=304951.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_173:}
这个底板好，想多大就多大。无论长宽怎样设置，都不会出现变形和失真的现象{:4_173:}
长夜漫漫，不知蜡烛燃尽时，美人儿的女红是不是完成了。 漂亮的制作，真给力！{:4_199:} 影儿在做复习练习作业，几个元素用得太好了，画面有故事情节感，美美哒{:4_187:} 红影朋友晚上好！我看黑黑教的你可用上了不少啊。你真棒！ 古乐好听，{:4_181:} 几个简单的元素，降噪了，摆脱了五色令人目盲的窘境 音乐很熟悉 就觉得好看，代码我是不懂的，问影姑娘好 加林森 发表于 2022-5-25 20:42
漂亮的制作，真给力！
昨晚轮到我志愿者值班，发完帖就赶紧跑过去了{:4_173:} 千羽 发表于 2022-5-25 20:46
影儿在做复习练习作业，几个元素用得太好了，画面有故事情节感，美美哒
这个代码背景和蜡烛还是第一次做，那个跳舞字体做过的，这次倒是复习了{:4_173:} 梦油 发表于 2022-5-25 20:47
红影朋友晚上好！我看黑黑教的你可用上了不少啊。你真棒！
嗯嗯，努力学习，防止学过的忘记了{:4_173:} 千羽 发表于 2022-5-25 20:47
古乐好听，
用了古装的图图，就赶紧去找了个巫娜的曲子{:4_173:} 马黑黑 发表于 2022-5-25 21:24
几个简单的元素，降噪了，摆脱了五色令人目盲的窘境
注意力转移了的缘故吧。这个代码背景还是很漂亮的，而且调整也方便，真好{:4_187:} 马黑黑 发表于 2022-5-25 21:24
音乐很熟悉
巫娜的，选了个和这场景稍微符合点的音乐名{:4_173:} 小满 发表于 2022-5-25 21:25
就觉得好看，代码我是不懂的，问影姑娘好
都是跟在黑黑后面学的代码，小满一起学啊{:4_187:} 红影 发表于 2022-5-26 10:00
嗯嗯，努力学习，防止学过的忘记了
我现在就是学了新的忘旧的。 竹影与烛影共舞
辉映红影的俏丽 红影 发表于 2022-5-26 09:58
昨晚轮到我志愿者值班，发完帖就赶紧跑过去了
辛苦了。{:4_187:}