马黑播放器深加工【蝴蝶效果】

亚伦影音工作室 发表于 2023-3-15 15:45

本帖最后由亚伦影音工作室于 2023-3-15 16:01 编辑 <br /><br /><style type="text/css">#papa {
margin: 10px -300px;
width: 1164px;
height: 640px;
background: #AEB1A8 url('https://www.kumeiwp.com/sub/filestores/2022/11/21/3ee0de85848f6a076ac5a58aad1221a7.gif') center/cover no-repeat;
box-shadow: 3px 3px 2px #000;
position: relative;
display: grid;
place-items: center;
z-index: 1;
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFf000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#mplayer {z-index: 20;
--state: paused;
position: absolute;top:30%; left:70%;
bottom: 10px;
width: 220px;
height: 200px;
cursor: pointer;
border-radius: 50%;
filter: drop-shadow(8px 4px 20px lightgreen);
animation: flash .3s infinite alternate var(--state);
}
#mplayer:hover {
transform: skew(5deg);
}
#mypic {
width: 100%;
height: 100%;
display: none;
position: absolute;
}

#canv {
display: block;
position: absolute;
}
@keyframes flash {
to { filter: drop-shadow(16px 8px 40px green); }
}
</style>
<div id="papa">

<span id="fullscreen">全屏观赏</span>

<div id="testImg" >

<div class='pat'>
<divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><divclass='pa'>➣</div><div class='pa'>➣</div>
</div>
<div type="button" id="btn"title="暂停/播放">
<div id="mplayer"><canvas height="200" id="canv" width="220"></canvas> <img alt="" id="mypic" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1678867161187174.gif" />
<audio autoplay="" id="aud" loop="" src="https://www.qqmc.com/mp3/music176729863.mp3"> </audio>
</div>
</div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
</div>
<script>
(function() {
let context = canv.getContext('2d');
let oImg = new Image();
oImg.src = mypic.src;
oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
let mState = () => aud.paused ? (canv.style.display = 'block', mypic.style.display = 'none', mplayer.style.setProperty('--state','paused')) : (canv.style.display = 'none', mypic.style.display = 'block', mplayer.style.setProperty('--state','running'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 2;
left: 50%;
transform: translate(-50%);
top: 80%;
font:normal 3em 华文隶书;
color: #000078;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);

-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%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
烟雨人间 (DJ沈念版) - 海来阿木
词：海来阿木
曲：海来阿木
编曲：曲比阿且
录音：曲比阿且
混音：张黎兵
OP：坚诚文化
（、）
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
男儿嘛他就该志在四方啊
`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
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;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
var image = document.getElementById("testImg"),
button = document.getElementById("btn");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<style>
.pat {position: absolute; top:70%; left:35%;z-index: 6;
--tf: linear;
--effect: hover 2s var(--tf) infinite;
width: 1000px;
}
.stop .pat{
animation-play-state: paused;
}
.pa { display: inline-block;
text-transform: uppercase;
text-align: center;
font-size: 3em;
color: #00ff00;
}

.pa:nth-child(1) {
animation: var(--effect);
}

.pa:nth-child(2) {
animation: var(--effect) .125s;
}

.pa:nth-child(3) {
animation: var(--effect) .25s;
}

.pa:nth-child(4) {
animation: var(--effect) .375s;
}

.pa:nth-child(5) {
animation: var(--effect) .5s;
}

.pa:nth-child(6) {
animation: var(--effect) .675s;
}

.pa:nth-child(7) {
animation: var(--effect) .75s;
}
.pa:nth-child(8) {
animation: var(--effect) 1s;
}
.stop .pa:nth-child(1) {
animation-play-state: paused;
}
.stop .pa:nth-child(2) {
animation-play-state: paused;
}
.stop .pa:nth-child(3) {
animation-play-state: paused;
}
.stop .pa:nth-child(4) {
animation-play-state: paused;
}
.stop .pa:nth-child(5) {
animation-play-state: paused;
}
.stop .pa:nth-child(6) {
animation-play-state: paused;
}
.stop .pa:nth-child(7) {
animation-play-state: paused;
}
.stop .pa:nth-child(8) {
animation-play-state: paused;
}
@keyframes hover {
0% {
transform: scale(0);
color: #000080;
}

20% {
transform: scale(1);
color: #ff0000;
}

50% {opacity: 1;
transform: scale(1);
color: #fff000;

}

80% {
transform: scale(0);
color: #000080;
}
}
</style>

焱鑫磊 发表于 2023-3-15 16:12

坐坐沙发欣赏佳作！{:4_176:}

红影发表于 2023-3-15 16:25

这个轮播的图图还是动图呢，图片的画质很高，全屏放大后仍然很精致。真漂亮的制作。欣赏亚伦老师好帖{:4_199:}

绿叶清舟 发表于 2023-3-15 17:10

制作真漂亮，欣赏了

马黑黑 发表于 2023-3-15 19:24

欣赏

庶民发表于 2023-3-15 19:46

好好品牌的。

页: [1]

花潮论坛's Archiver

马黑播放器深加工【蝴蝶效果】