《父亲》感恩父亲节
<style>.outer { left: -302px; top:120px;width: 1200px; height: 640px; background: linear-gradient(to right top,black,#eee);
position: relative; }
.outer h2 { position: absolute; margin: 26px; font: bold 1.7em sans-serif;color: #4229A3; text-shadow: 1px 1px 2px #000; }
.picbox { position: absolute; width: 1200px; height: 640px; animation: fadein 2s; }
.mama { left: 40px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .4; } }
</style>
<div class="outer">
<h2>龚玥 - 父亲</h2>
<img class="picbox" src="https://pic.imgdb.cn/item/62aee0200947543129605dc3.jpg" alt="" />
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div><br><br><br><br><br><br>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/23/c541496fc0c6992f8f1674a91b5da940.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let mama = document.querySelector('.mama'),
picbox = document.querySelector('.picbox'),
wrap = document.querySelector('.wrap'),
lrcbox = document.querySelector('.lrcbox'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
prog = (tt, cc) => 100 * cc / tt;
let idx = 0, flag = true, slip= 1;
let picAr =[
'https://pic.imgdb.cn/item/62aee0200947543129605dc3.jpg',
'https://pic.imgdb.cn/item/62aee053094754312960bfd4.jpg',
'https://pic.imgdb.cn/item/62aee0a5094754312961697d.jpg',
'https://pic.imgdb.cn/item/62aee0d3094754312961ccef.jpg',
'https://pic.imgdb.cn/item/62aee0f70947543129621b1a.jpg',
'https://pic.imgdb.cn/item/62aee11309475431296259ea.jpg'
];
Array.from({length: 10}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'sskey';
ele.style.left = key * 6 + key * 3 + 'px';
ele.style.height = num(10,60) + 'px';
ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
wrap.appendChild(ele);
})
let sskey = document.querySelectorAll('.sskey');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => {
Array.from(sskey).forEach((ele) => {
ele.style.height = num(10, 60) + 'px';
})
meter.value = prog(aud.duration, aud.currentTime);
});
let timer = setInterval(() => {
picbox.style.animation = '';
idx ++;
if(idx >= picAr.length) idx = 0;
picbox.src = picAr;
flag ? (picbox.style.animation = 'fadeout 2s', flag = false) : (picbox.style.animation = 'fadein 2s', flag = true);}, 6000);
</script> 学习黑黑的代码。祝福论坛的所有父亲们节日快乐{:4_187:} 小朋友的字太美了，太亲切了。
借红影朋友的美帖祝福天下的父亲们幸福快乐！ 红影 发表于 2022-6-19 20:08
学习黑黑的代码。祝福论坛的所有父亲们节日快乐
借亲爱的美美的贺帖，祝福论坛的父亲们节日快乐{:4_204:}{:4_204:} 祝全天下的父亲节日快乐！ 借师妹美贴，祝坛儿上父亲还健在的友友和已经当父亲的友友们都快乐。{:4_204:} 一起缅怀父亲 祝天下父亲节日快乐！ 梦油 发表于 2022-6-19 20:27
小朋友的字太美了，太亲切了。
借红影朋友的美帖祝福天下的父亲们幸福快乐！
一起祝福，也祝梦油节日快乐{:4_204:} 小辣椒 发表于 2022-6-19 20:55
祝全天下的父亲节日快乐！
跟亲爱的一起祝福{:4_204:} 醉美水芙蓉 发表于 2022-6-19 21:03
红影美女辛苦了！祝福天下父亲父亲节快乐！
跟水芙蓉美女一起祝福{:4_204:} 樵歌 发表于 2022-6-19 21:33
借师妹美贴，祝坛儿上父亲还健在的友友和已经当父亲的友友们都快乐。
跟师兄一起祝福{:4_204:} 友昕 发表于 2022-6-19 21:38
一起缅怀父亲
嗯，我也是。 岩新新 发表于 2022-6-19 21:46
祝天下父亲节日快乐！
谢谢新新，跟新新一起祝福{:4_204:} 红影 发表于 2022-6-20 13:10
一起祝福，也祝梦油节日快乐
谢谢，谢谢。谢谢红影朋友。
昨天孩子们一起和我度过了一个很快乐的父亲节。 梦油 发表于 2022-6-20 15:28
谢谢，谢谢。谢谢红影朋友。
昨天孩子们一起和我度过了一个很快乐的父亲节。
能和儿女一起欢乐过节，梦油真福气{:4_187:} 红影 发表于 2022-6-21 15:45
能和儿女一起欢乐过节，梦油真福气
是的，红影朋友，一家人在一起其乐融融。 红影 发表于 2022-6-20 13:12
跟师兄一起祝福
嗯，这个节日母亲节一样有意义。 梦油 发表于 2022-6-21 20:26
是的，红影朋友，一家人在一起其乐融融。
天伦之乐，人间最温馨的画面{:4_204:}