相亲相爱的一家人 TO：梦油 （学习黑黑The Box 播放器效果）
<style>#papa {
margin:150px 0 0 calc(50% - 781px);
width: 1400px;
height: 798px;
background: url('https://wj.zp68.com/lxx/yunhua/2024/02/17/IF.gif') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
top: 40px;
left: calc(50% - 100px);
width: 230px;
height: 190px;
border-style: dotted double ridge;
border-color: olive green lightgreen;
border-width: 10px 20px;
border-radius: 50%;
background: url('https://wj.zp68.com/lxx/yunhua/2024/02/17/IF.gif') no-repeat center/cover;
animation: borderSize .3s linear infinite alternate var(--state);
cursor: pointer;
}
#dt3{ position: absolute; width: 285px; height: 139px; top: 649px; left: 0px; }
@keyframes borderSize {
from { border-width: 10px 20px; border-color: olive green lightgreen; }
to { border-width: 20px 10px; border-color: red orange green; }}
.txtBg {
position: absolute;
left: 760px;
top: 90px;
font-size: 2.8rem;
color: transparent;
width: 600px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg,green, olive, tomato, green);
background-size: 600px 100px;
background-position: 600px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
</style>
<div id="papa">
<img id="dt3" src="https://wj.zp68.com/lxx/yunhua/2024/02/17/752.png" alt="" />
<div class="txtBg">相亲相爱一家人</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/02/17/xqxayjr.mp3" autoplay loop></audio>
<div id="mplayer"></div>
</div>
<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: 60px; font-size: 2.0em;--bg: linear-gradient(rgba(255,69,0,.15),rgba(255,69,0,.25)); color: Snow;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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
}
</script>
<script>
var mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> @梦油
梦油小辣椒功能拜个晚年{:4_187:}
祝新的一年财运，福运，一起来!
梦油，我们是花潮大家庭，相亲相爱的一家人{:4_179:}
@马黑黑
黑黑继续套用学习完成一个作业{:4_189:} 图片选得好，有如面朝大海春暖花开之意{:4_178:} 歌曲也选 得特别好，我们是花潮相亲相爱的一大家人。{:4_181:} 播放器做得真好，把大图浓缩进去了，还随着音乐节奏在动作。小辣椒老厉害了{:4_178:} 梦老哥收礼开心@梦油 好听，好看，{:4_199:} {:4_208:}
欣赏一下 本帖最后由 梦油 于 2024-2-17 18:17 编辑
小辣椒 发表于 2024-2-17 15:13
@梦油
梦油小辣椒功能拜个晚年
相亲相爱一家人，何等温馨的一支歌啊！我自从来到花潮家园以后，一直感受到家庭的温暖，管理员、各位版主和花潮的各位朋友和蔼可亲、坦诚相助，给我留下了深刻的印象。谢谢几位管理员，谢谢各位版主，谢谢花潮的各位朋友。衷心祝愿花潮论坛欣欣向荣、蒸蒸日上。
{:4_204:}谢谢小辣椒朋友。祝福小辣椒朋友青春永驻、朝气蓬勃！我们都是一家人！{:4_183:} 樵歌 发表于 2024-2-17 16:10
梦老哥收礼开心@梦油
是的，樵歌朋友。俺十分开心。谢谢小辣椒朋友，谢谢樵歌朋友，谢谢花潮的各位朋友。 画面温馨又浪漫，涛涛的波浪翻腾着，太逼真了{:4_187:} 沐浴在这海边美景的是美满幸福的一家人，还有正在吃草的和谐的羊夫妻和飞舞的海鸥……{:4_173:} 在美妙的大自然中，我们都是相亲相爱的一家人{:4_181:} 小辣椒的作品好立意，好制作，棒棒哒{:4_181:} 小辣椒 发表于 2024-2-17 15:14
@马黑黑
黑黑继续套用学习完成一个作业
想象力不错，整体设计与美学沾边 意境也美好。 这个帖效果不错{:4_178:} 播放器会晃动，马老师新的分享吧，最近冬雨都没有上来过 歌曲和图意相符，效果不错{:4_178:}