就是现在 - 刀郎/云朵/王琴[相册] - 欢乐水吧 - 花潮论坛

亚伦影音工作室 发表于 2022-9-24 07:26

就是现在 - 刀郎/云朵/王琴[相册]

本帖最后由亚伦影音工作室于 2022-9-24 08:48 编辑 <br /><br /><style type="text/css">
.book-wrap {width: 420px;
         height: 350px;
         position: relative;
         left: 250px;
         top: 60px;
         transform: rotatez(4deg)rotateX(20deg);
         transform-style: preserve-3d;}
.page { width: 100%;
   height: 100%;
   position: absolute;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0f9261bc02d781943f4caa27f67c2ab1.JPG);
   border-radius: 2px;border: 15px solid #cccccc;
   transform-origin: left;display: flex;
justify-content: center;
align-items: center;
box-shadow:0px 0px 0px 2px #000000;
   background-size:100% 100%;}
.book-contenr {animation: roll 22s0s infinite;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0f9261bc02d781943f4caa27f67c2ab1.JPG)}
.book-content1{animation: roll4s 18s2;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/ff17fabf0b4b48ae3a8e76448904914f.jpg)}
.book-content2{animation: roll6s 16sinfinite;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f66fe9c5324ad2c35d3d74f093174c41.jpeg)}
.book-content3{animation: roll8s 14s1;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d5c13ab7ea44bcec304e0dbdf98d5176.jpg)}
.book-content4{animation: roll 10s 12sinfinite;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/554c087b03f386b5058a4ed373a03de5.jpg)}
.book-content5{animation: roll 12s 10s1;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c75105e7fc0e6a770a0d991978a40ddb.jpg)}
.book-content6{animation: roll 14s8s2;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/fa30baa3feae1a76c9d2c11eac9c743e.jpg)}
.book-content7{animation: roll 16s6sinfinite;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6645513743e125c2be1aafac2449a40f.jpg)}
.book-content8{animation: roll 18s4s2;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/1cedfb76523fb22dab197619e8b7aa03.jpg)}
.book-content9{animation: roll 20s2s infinite;background-image: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b61defed94c21bd3107f5cab94321139.jpeg)}

   @keyframes roll {
0% {transform: rotateY(0deg);opacity: 1;}
30% {transform: rotateY(-170deg);opacity: 1;}
40% {transform: rotateY(-178deg);opacity: 1;}
50% {transform: rotateY(-180deg);opacity: 1;}
100% {transform: rotateY(-180deg);opacity: 1;}

}
</style>

<style>
   #papa { left: 0px; width: 1200px; height: 630px; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
   #mplayer { position: absolute; top:500px; width: 300px; height: 100px; user-select: none; display: grid; place-items: center; cursor: pointer; }
   #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
   #mplayer:hover #btnwrap { background: linear-gradient(45deg, #012BFA 21%,#F60303 75%) ; 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-radius: 6px; opacity: .25; }
   #btnplay { width: 20px; height: 20px; 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: 50px; width: 1200PX; height: 1px; border-radius: 0px; background: linear-gradient(45deg, #012BFA 21%,#F60303 75%) 100% 100% / 200% 200%; font:
normal 15px / 60px sans-serif; color: #ffffff; opacity: .75; }
   #lrc { position: absolute; top: 40px; font: bold 2.5em sans-serif;font-family:华文新魏; filter:drop-shadow(#FFFfff 2px 0 0)drop-shadow(#FFFfff 0 2px 0)drop-shadow(#FFFfff
-2px 0 0) drop-shadow(#FFFfff 0 -2px0);color: transparent; letter-spacing: 2px; background: linear-gradient(45deg, #012BFA 21%,#F60303 75%) 100% 100% / 200% 200%; background-

clip: text; -webkit-background-clip: text; }
   #mpic { position: absolute; width: 100%; height: 100%; mix-blend-mode: multiply; }
   @keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
   @keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>

<div style="z-index: 127;width: 1200px; height: 630px; margin-top:50px; margin-left:-310px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div id="papa">
<div class="book-wrap" >
<div class=" page " > </div>

<div class="page book-content book-content1"> </div>

<div class="page book-content book-content2" > </div>

<div class="page book-content book-content3"> </div>

<div class="page book-content book-content4"> </div>

<div class="page book-content book-content5" > </div>

<div class="page book-content book-content6"> </div>

<div class="page book-content book-content7"> </div>

<div class="page book-content book-content8" > </div>

<div class="page book-content book-content9"> </div>
</div>
   <div id="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>
</div>
<script>
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
let mKey = 0, mSeek = false, mFlag = true;
let aud = new Audio();

aud.src = 'https://www.qqmc.com/mp3/music384544.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.animationPlayState = 'paused') : (btnplay.style.display = 'none',

btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');

let showLrc = (time) => {
   lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';
   lrc.innerHTML = lrcAr;
   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;
   let mtime = lrcAr - (aud.currentTime - lrcAr);
   showLrc(mtime);
}

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>

亚伦影音工作室 发表于 2022-9-24 07:41

此贴在本论坛显示不全，有待解决！

马黑黑 发表于 2022-9-24 07:53

欣赏大作

红影发表于 2022-9-24 09:26

漂亮的翻页书图片轮播，欣赏亚伦老师精美作品{:4_187:}

加林森 发表于 2022-9-25 11:30

这个制作真不错。

醉美水芙蓉 发表于 2022-9-25 17:36

亚伦影音工作室 发表于 2022-9-26 09:24

找不到上传的网盘！

阙歌发表于 2022-10-1 23:55

精彩的画册~~~拿代码跟着学习做一个,谢谢老师!

阙歌发表于 2022-10-2 18:06

亚伦影音工作室发表于 2022-9-26 09:24
找不到上传的网盘！

上传空间,让玩家头疼的事,有些论坛提供上传空间的~~~{:4_190:}

亚伦影音工作室 发表于 2022-10-2 23:06

我在有的论坛有网盘，但地址前s

醉美水芙蓉 发表于 2022-10-7 22:35

页: [1]

花潮论坛's Archiver

就是现在 - 刀郎/云朵/王琴[相册]