首发祁隆新歌《老伴儿》音画，任静/付笛声演绎
本帖最后由 亚伦影音工作室 于 2022-10-23 21:46 编辑 <br /><br /><style>#papa { margin: 30px -214px; width: 1024px; height: 600px; background: silver url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/57649b733bf6dce53aceb413063611a1.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; position: relative; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: end start; }
.pMid { grid-area: mid; place-items: end center;bottom: 70px; }
.pFoot { grid-area: foot; place-items: center;bottom: 40px; }
#mplayer { position: absolute; width: 400px; height: 60px; font: normal 14px sans-serif; z-index: 9; }
#mplayer::before, #mplayer::after { position: absolute; width: 100%; height: 50%; color: snow; margin: 15px 0; }
#mplayer::before { content: attr(data-cur); }
#mplayer::after { content: attr(data-dur); text-align: right; }
#btnplay { position: absolute; left: -80px; bottom: 0px; width: 60px; height: 60px; border-radius: 0%;background: url('https://pic1.imgdb.cn/item/635544b016f2c2beb18edfab.png')0 0/100% 100%; cursor: pointer; z-index: 2; animation: rot linear 4s infinite; transform: rotateX(0deg) rotateY(0deg) rotate(0deg);}
#prog { --posX: 0px; position: absolute; bottom: 20px; width: 100%; height: 1px; background: #eee; cursor: pointer; }
#prog::before, #prog::after { position: absolute; content: ''; left: 0; }
#prog::before { width: var(--posX); height: 1px; background: red; }
#prog::after { left: var(--posX); top: calc(50% - 5px); width: 3px; height: 10px; background: silver; }
#tit { position: absolute; bottom: 20px; right: 30px;font: bold 3em sans-serif;text-shadow: 2px 2px 3px #212121; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; font-family: 华文隶书;
font-size: 45px; color:#800000 ; -webkit-background-clip: text; filter: drop-shadow(0px 0px 10px #FFF000)drop-shadow(0px 0px 10px #FF0000)drop-shadow(0px 0px 10px #00FFFF); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap;background: linear-gradient(23deg, #FA0000 0%,#73FF00 100%); filter: drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0)hue-rotate(0deg)contrast(120%)brightness(200%); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { 50% { transform: rotateX(0deg) rotateY(180deg) rotate(0deg)scale(1);filter: hue-rotate(360deg)}}
#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1600px 300px;
}
}
#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1024px;
height: 600px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: 0px -1600px;
}
}
#items
{position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;opacity: 1;
animation: slider 0.1s linear infinite;
}
@keyframes slider
{
from
{
opacity: 1;
filter: hue-rotate(360deg)contrast(120%)brightness(100%);
}
to
{
opacity: 1;
filter: hue-rotate(0deg)contrast(140%)brightness(100%);
}
}
</style>
<div id="papa">
<divid="items"><div class="pTop"style="mix-blend-mode: multiply;background:url('https://pic1.imgdb.cn/item/6355453a16f2c2beb18fae71.png') no-repeat center/cover;width: 1024px; height: 600px;" /></div></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('https://pic1.imgdb.cn/item/635545d216f2c2beb190a1fa.png')0 0/50% 70%" >
<imgid="mpic1"style="width: 100%; height: 100%;background:url('https://pic1.imgdb.cn/item/635545d216f2c2beb190a1fa.png')0 0/30% 40%" >
<div class="pMid"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
<div class="pFoot">
<div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="prog"></span><span id="btnplay"></span></div>
</div>
</div>
<script>
(function() {
let mKey = 0, mFlag = true, aud = new Audio();
aud.src = 'https://www.qqmc.com/mp3/music245035551.mp3';
aud.autoplay = true;
aud.loop = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
mpic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic.style.animationPlayState = 'paused');
items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => items.style.animationPlayState = 'running');
aud.addEventListener('pause', () => items.style.animationPlayState = 'paused');
mpic1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mpic1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => mpic1.style.animationPlayState = 'paused');
if (aud.paused) btnplay.style.animationPlayState = 'paused';
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
mplayer.onmousemove = (e) => {mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default';}
mplayer.onclick = (e) => {if (e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin
(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else
continue;}}});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running',
lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion',
name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for(j = 0; j < lrcAr.length; j ++) {if(aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > lrcAr.length - 1) mKey =
lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let toMin = (val) => { if (!val) return '00:00'; val = Math.floor(val); let min = parseInt(val / 60), sec = parseFloat(val % 60); if (min < 10) min = '0' + min; if (sec <
10) sec = '0' + sec; return min + ':' + sec; };
papa.oncontextmenu = () => false;
})();
</script>
本帖最后由 亚伦影音工作室 于 2022-10-23 21:49 编辑
本音画根据马黑老师css播放器源码改编。
点击旋转的五星即可停止画面及音乐。具有可控性。
歌曲是祁隆最新创作的歌曲《老伴儿》，由任静，付笛生夫妻演唱的。在抖音平台很火！
因为之前采用前缀没有S的图片地址所有，图片没有显示，以修改，若有异常请继续留言，谢谢！
欣赏亚伦老师精美音画佳作！ 制作精美，赞 亚伦影音工作室 发表于 2022-10-23 14:18
本音画根据马黑老师css播放器源码改编。
点击旋转的五星即可停止画面及音乐。具有可控性。
歌曲是祁隆最 ...
没有看见五角星
音乐也是画面点击很久才出来 欣赏新歌，谢谢分享 回忆 发表于 2022-10-23 15:58
没有看见五角星
我也没看到五角星。 问好亚伦，我也是没有看见五角星{:4_203:} 五角星是个 http 所以没显示 有谁愿意提供两个图片地址 亚伦影音工作室 发表于 2022-10-23 20:18
有谁愿意提供两个图片地址
快速寻找音乐 图片 和上传音乐
https://www.huachaowang.com/forum.php?mod=viewthread&tid=50563&fromuid=4275
(出处: 花潮论坛)
这里随便上传 小辣椒 发表于 2022-10-23 19:45
问好亚伦，我也是没有看见五角星
以修改，谢谢提供的图床！ 色彩缤纷，很漂亮的制作。欣赏亚伦老师的精彩{:4_187:}
页:
[1]