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

【女神节】姐就是女王（学习黑黑古屋效果）

<style>
#papa {
      --state: paused;
      margin: 80px 0 0 calc(50% - 593px);
      display: grid;
      place-items: center;
      width: 1024px;
      height: 640px;
      background: lightblue url('https://pic.imgdb.cn/item/6403e55bf144a01007bd92a5.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 DeepPink;
      color: HotPink;
      text-shadow: 1px 1px 1px #000;
      display: none;
      cursor: pointer;
}
.mplayer {
      position: absolute;
      left: 6%;
      bottom: 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(190deg);
      animation: rot .5s ease-in-out infinite alternate var(--state);
      cursor: pointer;
}
.mplayer::before {
      position: absolute;
      content: '';
      left: -20px;
      width: 100px;
      height:580px;
}
.mplayer:nth-of-type(2) {
      position: absolute;
      left: 90%;
      bottom: 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(170deg);
      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/15653652/01/22/70/620f1032eee1f_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
      <div class="mplayer"></div><div class="mplayer"></div>
<img id="pic" src="https://pic.imgdb.cn/item/6403ebeaf144a01007c508fe.gif" alt="" />
      <div id="btnFs">全屏观赏</div>

      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1804585632.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'));
      let btns = document.querySelectorAll('.mplayer');
      [...btns].forEach((item) => item.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 13:23

左边的那串糖葫芦是播放器，可以点击暂停。右边那个就是做个对称为了好看的。
学习一下黑黑的古屋效果，把转动点移到下面了。感谢黑黑的代码 @马黑黑{:4_187:}

红影 发表于 2023-3-5 13:25

看到大家的祝贺女神节的帖子都那么温柔，我弄个不一样的风格的来。

祝福论坛的姐妹们气质悠扬活得漂亮，自信放光芒{:4_187:}

红影 发表于 2023-3-5 13:28

活成一束光，把世界都照亮。{:4_178:}优雅又自信，这才是时代女性的样子。
偶尔听到这首歌，一下子就喜欢上了，太霸气了{:4_173:}

红影 发表于 2023-3-5 13:30

把歌词再搬一下：

不论昨晚经历了怎样的忧伤
睡一觉醒来依然有明媚阳光

穿最喜欢的衣服化最精致的妆
女人要气质悠扬活得漂亮

自己的人生 无需凭借谁的光
不做谁的公主做霸气的女王

一辈子不长 活出想要的模样
就算无人欣赏 也为自己鼓掌

姐就是女王 自信放光芒
你若爱就来 不爱莫张狂
收起你的那些小小花花肠
甜言或蜜语 去哄小姑娘
姐就是女王 自信放光芒
有钱了不起 姐也很自强
不惧风霜雪雨逆风也飞翔
活成一束光 世界都照亮

红影 发表于 2023-3-5 13:32

女神节快到了，祝福每位女子都能是霸气的女王，神采飞扬，活得自信而潇洒{:4_187:}

梦缘 发表于 2023-3-5 13:33

不错的效果，感谢分享，欣赏问好！{:4_176:}

一梦百年 发表于 2023-3-5 14:08

青春！阳光！霸气！！{:4_199:}

一梦百年 发表于 2023-3-5 14:09

姐就是女王，你确定妹不是{:4_189:}

庶民 发表于 2023-3-5 14:12

欢快明了，振奋精神。

梦油 发表于 2023-3-5 14:57

配发歌词挺好。

祝花潮女士朋友们节日快乐！

马黑黑 发表于 2023-3-5 15:26

红影 发表于 2023-3-5 13:23
左边的那串糖葫芦是播放器，可以点击暂停。右边那个就是做个对称为了好看的。
学习一下黑黑的古屋效果，把 ...

两边的糖葫芦可以设计成都能接受点击操作。一个思路是用 class 而不是id，这之前我们做过的

马黑黑 发表于 2023-3-5 15:26

帖子设计精妙，效果很好

小辣椒 发表于 2023-3-5 16:08

亲爱的~~太美了，2串糖葫芦{:4_199:}

小辣椒 发表于 2023-3-5 16:08

这么霸气的歌曲，祝女神节快乐！{:4_199:}

马黑黑 发表于 2023-3-5 17:09

再来看看姐{:4_170:}

辫子哥哥 发表于 2023-3-5 17:14

{:4_171:}日子好快

绿叶清舟 发表于 2023-3-5 17:52

这歌来劲，借贴祝姐妹们节日快乐

雨中悄然 发表于 2023-3-5 18:20

图片音乐气场极强，听起来十分过瘾{:4_187:}

醉美水芙蓉 发表于 2023-3-5 18:40

页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 【女神节】姐就是女王（学习黑黑古屋效果）