非有非空 (DJ默涵版)

醉美水芙蓉 发表于 2023-5-28 17:14

本帖最后由醉美水芙蓉于 2023-5-28 22:03 编辑 <br /><br /><style>
#papa {
margin: 10px -300px;
width: 1164px;
height: 620px;
background:#FF0000 url('https://') center/cover no-repeat;
box-shadow: 3px 3px 0px #cccccc;
position: relative;
z-index: 1;
--state: paused;overflow:hidden;
}
#mplayer{position: absolute;top:50%; left:4%;z-index: 20;
width:180px;
height:180px; }
.photo {width: 100%; height: 100%;
position: absolute;z-index: 1;
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 32s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}

@keyframes round {1% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1);}

4% {
opacity: 1;
-webkit-transform:translate(0%,0%)}
8% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1);}

10% {
opacity: 1;
-webkit-transform:translate(0%,0%)scale(1);}

18% {
opacity: 0;
-webkit-transform:translate(0%,0%)scale(1);}
}

.photo:nth-child(1) {background:url(https://img-baofun.zhhainiao.com/fs/2528524a8a37e9435c52e766e37ae90d.jpg)0 0/100% 100%;
animation-delay: 28s;
}
.photo:nth-child(2) {background:url(https://img-baofun.zhhainiao.com/fs/7a0c5ffbf9fa4624abae680a3820a90a.jpg)0 0/100% 100%;
animation-delay: 24s;
}
.photo:nth-child(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/049b0bce15b6ee70a3c9bea223103efc_preview.jpg)0 0/100% 100%;
animation-delay: 20s;
}
.photo:nth-child(4) {background:url(https://img-baofun.zhhainiao.com/fs/a6819cdc4c0f3466ebf8784eb7f95da2.jpg)0 0/100% 100%;
animation-delay: 16s;
}
.photo:nth-child(5) {background:url(https://img-baofun.zhhainiao.com/fs/2487d24f325f5ea50d8f514c305b3d3f.jpg)0 0/100% 100%;
animation-delay: 12s;
}
.photo:nth-child(6) {background:url(https://img-baofun.zhhainiao.com/fs/2cc44a313a7ee5af8f22661dc2a1b309.jpg)0 0/100% 100%;
animation-delay: 8s;
}
.photo:nth-child(7) {background:url(https://img-baofun.zhhainiao.com/fs/3f6e2aeef9dc70c50705d113c3d98060.jpg)0 0/100% 100%;
animation-delay: 4s;
}
.photo:nth-child(8) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/51801ac55d3c0c7a1564273b1cc9bbcf.jpeg)0 0/100% 100%;
animation-delay: 0s;
}

.st img:nth-child(1) {
animation-play-state: paused;
}
.st img:nth-child(2){
animation-play-state: paused;
}
.stimg:nth-child(3){
animation-play-state: paused;
}
.st img:nth-child(4){
animation-play-state: paused;
}
.st img:nth-child(5){
animation-play-state: paused;
}
.st img:nth-child(6){
animation-play-state: paused;
}
.st img:nth-child(7) {
animation-play-state: paused;
}
.st img:nth-child(8) {
animation-play-state: paused;
}

#vid { display: none; }
#canv {mix-blend-mode: difference;
position: absolute;
display: block;
left:10%;
top: 70%;z-index: 4;
border-radius: 0%;
opacity: 1;
}
@keyframes flash {
to { box-shadow: 0 0 30px white; }
}
#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 3;animation: slider 3s linear infinite ;opacity: 1;}

@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 50% {background: url(https://www.kumeiwp.com/sub/filestores/2022/11/21/8cc174354eb646c775ac6beaa058a5b3.png) 0 0/100% 100%;100%} { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 181, 441, 0.91) 86%);} }
</style>

<div id="papa">
<div id="testImg"><img class='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><img class='photo ' ><img class='photo '><imgclass='photo '><imgclass='photo '></div>
<div id="fg"></div>
<canvas id="canv"></canvas>
<divid="testBtn"><divid="Btn"><div id="mplayer" data-tt="HCPlayer

00:00
00:00"><img id="an" src="http://5b0988e595225.cdn.sohucs.com/images/20190719/4f5cbf4b21ae4ccc97ae0ea8f35060ee.gif" width="100%" height="100%"></div></div></div>
<div data-lrc=" " id="lrc"> </div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music270414021.mp3" autoplay loop></audio>
<video id="vid" src="" loop autoplay muted></video>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = 1000, hh = canv.height =250;
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
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 ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('timeupdate', () => mplayer.dataset.tt = '.\n\n' + toMin(aud.duration) + '\n' + toMin(aud.currentTime));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');

</script>
<style type="text/css">#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
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：海酝文化
LRC编辑：醉美水芙蓉
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲随江入海流
我与浮沉来斗酒
一胜一负能出几多秋
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲追月追星斗
我与来去不念旧
非有非空最是不能留
月如钩缓缓独上西楼
问清风浅浅一杯风流
山外青山楼外楼
一山还有一山陡
不贪不念我还我自由
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲随江入海流
我与浮沉来斗酒
一胜一负能出几多秋
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲追月追星斗
我与来去不念旧
非有非空最是不能留
月如钩缓缓独上西楼
问清风浅浅一杯风流
山外青山楼外楼
一山还有一山陡
不贪不念我还我自由
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲随江入海流
我与浮沉来斗酒
一胜一负能出几多秋
我欲乘风载孤独的舟
我欲半生流离半生愁
我欲追月追星斗
我与来去不念旧
非有非空最是不能留
谢谢欣赏！
`;

/*变量：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); /*获得歌词数组*/
})();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image = document.getElementById("an"),
button = document.getElementById("testBtn");

if (image && button) {
button.onclick = function() {
   if (this.value == '') {
      image.play();
         this.value = '.';
   } else {
         image.stop();
         this.value = '';
   }
};
}
</script>

<script >
var imagee = document.getElementById("testImg"),
button = document.getElementById("Btn");

if (imagee.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         imagee.classList.remove('st');
         this.value = '*';
   } else {
         imagee.classList.add('st');
         this.value = '.';
   }
};
}
</script>

梦缘发表于 2023-5-28 17:59

好看好听，制作精彩，欣赏问好！{:4_204:}

醉美水芙蓉 发表于 2023-5-28 18:55

梦缘发表于 2023-5-28 17:59
好看好听，制作精彩，欣赏问好！

问候老师晚上好！

红影发表于 2023-5-28 18:58

美女轮播和底图变色都很漂亮。欣赏水芙蓉美女好帖{:4_187:}

樵歌发表于 2023-5-28 19:29

一边听歌一边欣赏美女，{:4_187:}{:4_174:}

亦是金 发表于 2023-5-28 20:16

欣赏美帖！学习了！{:4_187:}

醉美水芙蓉 发表于 2023-5-28 20:46

红影发表于 2023-5-28 18:58
美女轮播和底图变色都很漂亮。欣赏水芙蓉美女好帖

问候红影美女晚上好！

醉美水芙蓉 发表于 2023-5-28 20:47

樵歌发表于 2023-5-28 19:29
一边听歌一边欣赏美女，

问候樵歌晚上好！

醉美水芙蓉 发表于 2023-5-28 20:47

亦是金发表于 2023-5-28 20:16
欣赏美帖！学习了！

问候老师晚上好！

亚伦影音工作室 发表于 2023-5-28 20:59

我记得按钮是可以转动的，咋不转！

梦油发表于 2023-5-28 21:15

欣赏佳作，问候芙蓉。

醉美水芙蓉 发表于 2023-5-28 21:52

梦油发表于 2023-5-28 21:15
欣赏佳作，问候芙蓉。

问候老师晚上好！

醉美水芙蓉 发表于 2023-5-28 21:52

亚伦影音工作室发表于 2023-5-28 20:59
我记得按钮是可以转动的，咋不转！

这个按钮不会转！

三月的阳光 发表于 2023-5-28 21:56

醉美水芙蓉发表于 2023-5-28 21:52
这个按钮不会转！

http://5b0988e595225.cdn.sohucs.com/images/20190719/4f5cbf4b21ae4ccc97ae0ea8f35060ee.gif

呵呵，送你一个{:4_173:}

醉美水芙蓉 发表于 2023-5-28 21:58

三月的阳光发表于 2023-5-28 21:56
呵呵，送你一个

谢谢阳光老师！

三月的阳光 发表于 2023-5-28 22:02

醉美水芙蓉发表于 2023-5-28 21:58
谢谢阳光老师！
不用谢，资源共享，芙蓉制作的很漂亮~~{:4_187:}

三月的阳光 发表于 2023-5-28 22:07

醉美水芙蓉发表于 2023-5-28 21:58
谢谢阳光老师！

看你还在替换是不是不太如意，那再来一个试试~~{:4_173:}
https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190722/e4d19f2ffdc44e80925aad283542c8b0.gif

醉美水芙蓉 发表于 2023-5-28 22:13

三月的阳光发表于 2023-5-28 22:07
看你还在替换是不是不太如意，那再来一个试试~~

谢谢！阳光老师的按钮挺漂亮的！

三月的阳光 发表于 2023-5-28 22:20

醉美水芙蓉发表于 2023-5-28 22:13
谢谢！阳光老师的按钮挺漂亮的！

不用谢，芙蓉那么客气，阳光反而变的不好意思了~~{:4_173:}

红影发表于 2023-5-28 22:28

醉美水芙蓉发表于 2023-5-28 20:46
问候红影美女晚上好！

问好水芙蓉，晚上好{:4_204:}

页: [1] 2

花潮论坛's Archiver

非有非空 (DJ默涵版)