心若向阳好运不断

醉美水芙蓉 发表于 2023-3-5 21:05

本帖最后由醉美水芙蓉于 2023-3-5 21:05 编辑 <br /><br /><style>
#papa {
   --state: paused;
   margin: 80px 0 0 calc(50% - 593px);
   display: grid;
   place-items: center;
   width: 1024px;
   height: 640px;
   background: lightblue url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/85d6b77dbfec977844b8d36a24a9c6b7.mp4.jpg') no-repeat center/cover;
   box-shadow: 6px 3px 20px #000;
   user-select: none; overflow: hidden;
   position: relative;
   z-index: 1;
}
#btnFs {
   position: absolute;
   bottom: 20px;
   width: fit-content;
   height: fit-content;
   padding: 6px;
   border-radius: 6px;
   border: 2px solid green;
   color: lightgreen;
   text-shadow: 1px 1px 1px #000;
   display: none;
   cursor: pointer;
}
#mplayer {
   position: absolute;
   left: 6%;
   top: 0;
   width: 50px;
   height: 50px;
   background: hsla(175,100%,95%,.25);
   border-radius: 50%;
   box-shadow:
            0 60px 20px 10px hsla(175,100%,50%,.45),
            0 140px 20px 20px hsla(175,100%,60%,.45),
            0 240px 20px 30px hsla(175,100%,70%,.45),
            0 360px 20px 40px hsla(175,100%,75%,.45),
            0 500px 20px 50px hsla(175,100%,80%,.45);
   transform: rotate(-30deg);
   animation: rot .5s ease-in-out infinite alternate var(--state);
   cursor: pointer;
}
#mplayer::before {
   position: absolute;
   content: '';
   left: -20px;
   width: 100px;
   height:580px;
}
#mplayer1 {
   position: absolute;
   left: 93%;
      top: 0;
   width: 50px;
   height: 50px;
   background: hsla(175,100%,95%,.25);
   border-radius: 50%;
   box-shadow:
            0 60px 20px 10px hsla(175,100%,50%,.45),
            0 140px 20px 20px hsla(175,100%,60%,.45),
            0 240px 20px 30px hsla(175,100%,70%,.45),
            0 360px 20px 40px hsla(175,100%,75%,.45),
            0 500px 20px 50px hsla(175,100%,80%,.45);
   transform: rotate(30deg);
   animation: rot1 .5s ease-in-out infinite alternate var(--state);
   cursor: pointer;
}
@keyframes rot { to { transform: rotate(200deg); } }
@keyframes rot1 { to { transform: rotate(160deg); } }
#pic {
   position: absolute;
   left: calc(50% - 200px);;
   top: 18%;
   width: 372px;
   height: 448px;
   mix-blend-mode: multiply;
   -webkit-mask-image:radial-gradient(black 35%, transparent 70%);
   opacity: 0.9;
}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute;top: 40px; font: bold 2.4em sans-serif; color: hsl(300, 100%, 100%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 100%, 50%, .45), hsla(320, 100%, 50%, .6), hsla(60, 100%, 50%, .75)); filter: inherit; -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%; } }
.vid { position: absolute; width: 1024px; height: 695px; top: -55px; right:0px; object-fit: cover; opacity: .88; mix-blend-mode: screen;}
</style>

<div id="papa">
   <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/33/5b57cbd737c25.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
   <div id="mplayer"></div><div id="mplayer1"></div>
<img id="pic" src="https://pic.imgdb.cn/item/6404920ff144a01007bc0caf.gif" alt="" />
   <div id="btnFs">全屏观赏</div>

   <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=263378787&.mp3" autoplay loop></audio>
</div>

<script>
(function() {
   let fs = false, timerId;
   let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (papa.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
   mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
   aud.addEventListener('play', () => mState());
   aud.addEventListener('pause', () => mState());
   aud.addEventListener('ended', () => playNext());
   papa.addEventListener('mousemove', (e) => {
            clearTimeout(timerId);
            btnFs.style.display = 'block';
            timerId = setTimeout('btnFs.style.display = "none"', 3000);
   });
   btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
   document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,

];
   aud.addEventListener('timeupdate', () => {

            for (j = 0; j < lrcAr.length; j++) {
                     if (aud.currentTime >= lrcAr) {
                           if (mKey === j) showLrc(lrcAr);
                           else continue;
                     }
            }
   });
   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;
   };
})();
</script>

马黑黑 发表于 2023-3-5 21:25

这个构思也很巧妙

红影发表于 2023-3-5 21:42

制作很漂亮，色彩很清新{:4_187:}

红影发表于 2023-3-5 21:43

这个光柱角度太大了点，都跑外面去了，想捕捉光柱来暂停很困难了{:4_173:}

庶民发表于 2023-3-6 04:39

让我们在欣赏的同时得到一种享受。

醉美水芙蓉 发表于 2023-3-6 06:59

马黑黑发表于 2023-3-5 21:25
这个构思也很巧妙

就是光柱不知道怎么调节，调不好？

醉美水芙蓉 发表于 2023-3-6 07:00

红影发表于 2023-3-5 21:43
这个光柱角度太大了点，都跑外面去了，想捕捉光柱来暂停很困难了

是的，光柱我不知道怎么调了？

醉美水芙蓉 发表于 2023-3-6 07:00

庶民发表于 2023-3-6 04:39
让我们在欣赏的同时得到一种享受。

谢谢老师支持！

马黑黑 发表于 2023-3-6 07:45

醉美水芙蓉发表于 2023-3-6 06:59
就是光柱不知道怎么调节，调不好？

这个需要功夫和工夫

大漠孤烟 发表于 2023-3-6 09:09

灵动

醉美水芙蓉 发表于 2023-3-6 12:01

大漠孤烟发表于 2023-3-6 09:09
灵动

谢谢版主支持！

醉美水芙蓉 发表于 2023-3-6 12:03

马黑黑发表于 2023-3-6 07:45
这个需要功夫和工夫

是的，调半天被我调没有了，没有办法就这样发出来了！

马黑黑 发表于 2023-3-6 12:03

醉美水芙蓉发表于 2023-3-6 12:03
是的，调半天被我调没有了，没有办法就这样发出来了！

也行

红影发表于 2023-3-6 17:43

醉美水芙蓉发表于 2023-3-6 07:00
是的，光柱我不知道怎么调了？

那个和调整的角度有关，你这个还是放上面的，可以用黑黑原来的负值角度，另一边的用相同的正值就行。

醉美水芙蓉 发表于 2023-3-6 17:48

红影发表于 2023-3-6 17:43
那个和调整的角度有关，你这个还是放上面的，可以用黑黑原来的负值角度，另一边的用相同的正值就行。

是的，我本来就不会瞎搞的！

红影发表于 2023-3-6 19:30

醉美水芙蓉发表于 2023-3-6 17:48
是的，我本来就不会瞎搞的！

没事，多试就清楚了啊{:4_173:}

页: [1]

花潮论坛's Archiver

心若向阳好运不断