闹元宵
https://pic.imgdb.cn/item/65d860909f345e8d031943c8.gif
<style>
#papa { margin: 0 0 0 calc(50% - 742px); position: relative; width: 1324px; height: 740px; background: lightblue url('https://pic.imgdb.cn/item/65d6fcc29f345e8d037b6657.gif') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 8px ridge lightgreen; overflow: hidden; }
#vid { position: absolute; top: -70px;left: 260px; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; transform: scale(-1,1); }
#mplayer { position: absolute; right: 160px; bottom: 100px; width: 200px; height: 200px; border-radius: 50%; filter: drop-shadow(3px 3px 8px darkgreen); cursor: pointer; transform: scale(var(--size)) rotate(0); animation: rotating 8s linear infinite var(--state); --size: 1.2; }
#mplayer::before { position: absolute; content: ''; inset: 22px; border-radius: 50%; background: radial-gradient(yellow, transparent); box-shadow: 0 0 2px red, inset 0 0 160px lightblue; }
ye-zi { position: absolute; transform: rotate(60deg); offset-path: path('M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100'); offset-distance: 50%; }
ye-zi::before, ye-zi::after { position: absolute; content: ''; width: 10px; height: 50px; border-radius: 10% 70%; background: linear-gradient(lightgreen, green, lightgreen); transform-origin: 50% 100%; }
ye-zi::after { transform: rotate(45deg); }
@keyframes rotating { to { transform: scale(var(--size)) rotate(-360deg); } }
#dt3{ position: absolute; width:499px; height: 750px; top: 10px; left:-26px; }
</style>
<div id="papa">
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/02/20/eb24ae09bdf9dec331543b4010692bf2.mp3" autoplay loop></audio>
<video id="vid" src="" loop muted></video>
<div id="mplayer"></div>
</div>
<script>
var all = 12;
Array.from({length: all}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `offset-distance: ${100 * key / all}%;`;
mplayer.prepend(item);
});
var mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#mplayer',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba( 178,34,34,.65)); color: #fff;',
});
};
let geci = [['0.00', '挂红灯',7.35],
['7.74', '演唱：阿宝赵云侠',4.88],
['12.88', '正月里来是新年纸糊的纱灯挂在门前',12.32],
['25.85', '风吹沙灯突啰啰转越挂越转越好看',11.95],
['38.43', '争叭一叭一叭争叭一叭正争红花一花一花红',6.24],
['45.00', '红花一花红花一花红绿个茵茵',6.22],
['51.55', '红灯绿灯真喜人',8.55],
['60.55', '',6.93],
['67.85', '六月里来热难当二茜草帽遮阴凉',12.07],
['80.56', '小妹妹编来哥戴上问声三哥凉不凉',12.26],
['93.46', '争叭一叭一叭争叭一叭正争红花一花一花红',6.13],
['99.91', '红花一花红花一花红绿个茵茵',6.25],
['106.49', '红灯绿灯真喜人',8.52],
['115.46', '',7.01],
['122.84', '十月里来正是个冬我和三哥配成婚',12.19],
['135.67', '小妹妹爱上个三哥哥白头到老永不分',12.30],
['148.62', '争叭一叭一叭争叭一叭正争红花一花一花红',5.98],
['154.91', '红花一花红花一花红绿个茵茵',6.22],
['161.46', '红灯绿灯真喜人',9.46],
['171.42', '',4.40],
['176.05', '',4.5]
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
mplayer.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script> 好欢乐的闹元宵的好帖，很喜庆{:4_199:} 欣赏老谟深虑好帖，歌曲也好喜庆呢。借帖同祝大家元宵佳节快乐{:4_177:} 好喜庆的贺贴，老谟元宵快乐 红影 发表于 2024-2-23 19:00
好欢乐的闹元宵的好帖，很喜庆
谢谢红影老师的收看和评精鼓励！
红影 发表于 2024-2-23 19:03
欣赏老谟深虑好帖，歌曲也好喜庆呢。借帖同祝大家元宵佳节快乐
祝老师元宵节快乐！
绿叶清舟 发表于 2024-2-24 10:46
好喜庆的贺贴，老谟元宵快乐
谢谢老师的收看，祝你元宵节快乐！
老谟深虑 发表于 2024-2-24 14:40
谢谢红影老师的收看和评精鼓励！
不客气啊，祝老谟深虑元宵节快乐{:4_187:} 老谟深虑 发表于 2024-2-24 14:41
祝老师元宵节快乐！
大家一起快乐{:4_177:} 欣赏老谟深虑的精彩贺帖，好喜庆的{:4_199:} 祝元宵节快乐！{:4_187:} 小辣椒 发表于 2024-2-24 16:22
祝元宵节快乐！
祝老师元宵节快乐！
小辣椒 发表于 2024-2-24 16:22
欣赏老谟深虑的精彩贺帖，好喜庆的
谢谢老师的支持和鼓励，问好！
页:
[1]