《汪洋中的一条船》——代码特效

红枫发表于 2022-10-4 19:30

<DIV style="POSITION: relative; WIDTH: 900px; TOP: 00px; LEFT: 80px">
<base/>
<style>
.bk1 {position:relative; left:0px; width:737px; height:1060px; margin:30px auto; box-shadow:0px 0px 15px 10px #0115d5; display: grid; place-items:center; overflow: hidden; z-index: 0; border:2px #cccccc solid;}
.bk2 {position:relative; left:0px; width:737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5lkR.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 20s infinite;}
@keyframes aniAct0{
0%{opacity:0.8;transform:scale(1.0);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0.8;transform:scale(1.0);}}
.lm0 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIZ4I.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 10s infinite;}
.lm1 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIZ4I.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 7s infinite;}
.lm2 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fofK0A.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm3 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fofmOH.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm4 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fofMTI.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm5 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fofumd.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm6 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5lkR.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm7 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5mXF.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 12s infinite;}
.lm8 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5K0J.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 5s infinite;}
.lm9 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5um4.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm10 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo5M79.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm11 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/fo51t1.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm12 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIVUA.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm13 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foImCt.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm14 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIEEd.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm15 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIFDe.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm16 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foIn8P.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
.lm17 {position:relative; left:0px; width: 737px; height:1060px; margin: 0px auto; align-content:center; background: url('https://z3.ax1x.com/2021/08/18/foflkt.jpg') no-repeat center/cover; display: grid; place-items:center; overflow:hidden; z-index : 1; border:0px #cccccc solid;animation:aniAct0 6s infinite;}
#mplayer {position:absolute;z-index:2; bottom:0px; left:10px; width:100px; height: 30px; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap {background: linear-gradient(to top right, red, green); border-radius: 50%; opacity: .75; }
#btnwrap, #prog {position: absolute; display:grid; place-items:center; transition: .5s; }
#btnwrap { --yy: -15px; width:40px; height:40px; transform:rotate(45deg); border:1px solid tan; border-radius:6px; opacity: .25; }
#btnplay {width:20px; height:20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog {--yy:20px; width:100px; height:16px; border-radius:10px; background: linear-gradient(90deg, orange, red 100%, transparent 0); border: 1px solid gray; font: normal 14px / 16px sans-serif; color: #333; opacity: .75; }
#lrc { z-index:2;position: absolute; top:930px; font:bold 2.5em sans-serif; color:rgba(245,245,0,.99); text-shadow:1px 1px 1px #000; --motion: cover2; --tt: 1s; --state: running; }
#lrc::before { position:absolute; content:attr(data-lrc); width: 0; height: 100%; left: 0px; top: 0px; color: rgba(255,0,0,.9); overflow: hidden; white-space: nowrap; 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%; } }
#mpic {position: absolute; transform: rotateY(0deg); left: 0; top: 0; width: 25px; offset-distance: 0; offset-path: path("M 0 0 Q 300 150, 512 180 T 1024 110"); animation: move 8s linear infinite ;z-index : 10;}
@keyframes move { to { offset-distance: 100%; } }
#mpic1 {position: absolute; transform: rotateX(180deg); left: 0; top: 0; width: 80px; offset-distance: 0; offset-path: path("M 1024 100 Q 512 160, 300 100 T 0 0"); animation: move1 8s linear infinite ;z-index : 10;}
@keyframes move1 { to { offset-distance: 100%; } }
@keyframes bgMove1 { to { background-position: -100% 0; } }
@keyframes bgMove2 { to { background-position: -100% 0; } }
</style>
<div id="c3" class ="bk1">
<div id="c1" class ="bk2">
<div style="POSITION:absolute; TOP: 160px;left: 240px;WIDTH: 900px; HEIGHT: 200px;center;"><strong><font size="6" color="#f54500"><b>   汪洋中的一条船</b></font></div>
<div style="POSITION:absolute;TOP: 240px;left: 125px; WIDTH: 900px; HEIGHT: 100px;center;"><font size="5"><b><font color="#0762f9">词曲：纪利男  演唱：余天   <font color="#0762f9">网页：深秋红枫</font></a></font><font color="#0762f9"> </font></b></font></strong></div>
<div style="POSITION: absolute; TOP: 370px;left: -00px;WIDTH: 737px; HEIGHT: 400px; "align="center"><img src=https://z3.ax1x.com/2021/08/19/fHIMm8.gif WIDTH=737 HEIGHT=400px></div>
</div>
<img id="mpic" alt="" src="https://pic.imgdb.cn/item/6330fcbb16f2c2beb143688d.gif" />
<img id="mpic1" alt="" src="https://z3.ax1x.com/2021/08/19/fHIQ0S.gif" />
<div id="lrc" data-lrc="　　"></div>
<div id="mplayer">
<div id="btnwrap">
<span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
aud.src = 'https://music.163.com/song/media/outer/url?id=181842.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => 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.background= 'linear-gradient(90deg, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + 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.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', 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;
};
</script>
<script>
aud.ontimeupdate = function() {myFunction()};
function myFunction()
{
c2= aud.currentTime
switch(true) {
case c2>0 && c2<7:
document.getElementById("c1").className="bk2";
break;
case c2>7 && c2<15:
document.getElementById("c1").className="lm17";
break;
case c2>15 && c2<20:
document.getElementById("c1").className="lm11";
break;
case c2>20 && c2<25:
document.getElementById("c1").className="lm9";
break;
case c2>25 && c2<32:
document.getElementById("c1").className="lm7";
break;
case c2>32 && c2<37:
document.getElementById("c1").className="lm1";
break;
case c2>37 && c2<43:
document.getElementById("c1").className="lm2";
break;
case c2>43 && c2<49:
document.getElementById("c1").className="lm3";
break;
case c2>49 && c2<56:
document.getElementById("c1").className="lm4";
break;
case c2>56 && c2<61:
document.getElementById("c1").className="lm5";
break;
case c2>61 && c2<67:
document.getElementById("c1").className="lm6";
break;
case c2>67 && c2<73:
document.getElementById("c1").className="lm7";
break;
case c2>73 && c2<76:
document.getElementById("c1").className="lm8";
break;
case c2>76 && c2<80:
document.getElementById("c1").className="lm9";
break;
case c2>80 && c2<82:
document.getElementById("c1").className="lm10";
break;
case c2>82 && c2<86:
document.getElementById("c1").className="lm11";
break;
case c2>86 && c2<89:
document.getElementById("c1").className="lm12";
break;
case c2>89 && c2<92:
document.getElementById("c1").className="lm13";
break;
case c2>92 && c2<101:
document.getElementById("c1").className="lm14";
break;
case c2>101 && c2<112:
document.getElementById("c1").className="lm15";
break;
case c2>112 && c2<118:
document.getElementById("c1").className="lm16";
break;
case c2>118 && c2<123:
document.getElementById("c1").className="lm17";
break;
case c2>123 && c2<129:
document.getElementById("c1").className="lm1";
break;
case c2>129 && c2<135:
document.getElementById("c1").className="lm3";
break;
case c2>135 && c2<141:
document.getElementById("c1").className="lm7";
break;
case c2>141 && c2<147:
document.getElementById("c1").className="lm15";
break;
case c2>147 && c2<153:
document.getElementById("c1").className="lm13";
break;
case c2>153 && c2<159:
document.getElementById("c1").className="lm10";
break;
case c2>159 && c2<161:
document.getElementById("c1").className="lm8";
break;
case c2>161 && c2<166:
document.getElementById("c1").className="lm6";
break;
case c2>166 && c2<168:
document.getElementById("c1").className="lm4";
break;
case c2>168 && c2<172:
document.getElementById("c1").className="lm2";
break;
case c2>172 && c2<175:
document.getElementById("c1").className="lm0";
break;
case c2>175 && c2<178:
document.getElementById("c1").className="lm7";
break;
case c2>178 && c2<187:
document.getElementById("c1").className="lm5";
break;
default:
document.getElementById("c1").className="lm3";
}
}
</script>

</DIV>

蓝魔发表于 2022-10-4 23:03

欣赏一下，谢谢。

非常开心 发表于 2022-10-5 09:21

欣赏楼主的新作，点赞多谢分享！

195400 发表于 2022-10-5 09:25

http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif

寒冬残荷 发表于 2022-10-5 23:06

欣赏学习！

我的浏览器有问题？转碟离开很远的？

195400 发表于 2022-10-6 09:02

寒冬残荷发表于 2022-10-5 23:06
欣赏学习！

我的浏览器有问题？转碟离开很远的？

bottom:0px; left:10px;

应该再画面的左下角

红枫发表于 2022-10-6 09:03

寒冬残荷发表于 2022-10-5 23:06
欣赏学习！

我的浏览器有问题？转碟离开很远的？
哦，那是签名动图！
谢谢欣赏，也就是代码借着用用，换换图，换换LRC罢了！

相约爱晚亭 发表于 2022-10-10 09:57

欣赏精美代码音画佳作！

页: [1]

中画网's Archiver

《汪洋中的一条船》——代码特效