杨帆 发表于 2025-2-14 17:34

情人节快乐

本帖最后由 杨帆 于 2025-6-1 10:00 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>《情人》— 刀郎
</title>
</head>
<body>
    <style>
      #papa {
            margin: 130px 0; left: calc(50% - 75px); transform: translateX(-50%); width: clamp(600px, 90vw, 1700px); min-height: 80vh; aspect-ratio: 17/9;background: none;
            box-shadow: 5px 5px 8px gray;
            overflow: hidden;
            position: relative;
            display: grid;
            place-items: center;
            pointer-events: none;
            z-index: 1;
      }

      #player:hover {
            transform: scale(1.1, 1.1);
            filter: drop-shadow(0 0 80px Gold);
      }

      #tit {
            position: absolute;
            z-index: 4;
            width: 60px;
            top: 18%;
            right: 4%;
            font: 400 2.7em/1em 华文隶书;
            color: transparent;
            background-image: linear-gradient(180deg, #fff, #00ff00, #fff000);
            background-size: 100px 400px;
            border: 1px #000;
            font-weight: bold;
            writing-mode: vertical-rl;
            -webkit-background-clip: text;
            animation: wenzi 10s linear infinite alternate
      }

      @keyframes wenzi {
            0% {
                background-position: 0px -2500px;
            }

            100% {
                opacity: 1;
                background-position: 0px -1000px;
            }
      }

      #vid2 {
            position: absolute;
            width: 120%;
            height: 120%;
            object-fit: cover;
            pointer-events: none;
            -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
            opacity: .99;
      }

      #vid3 {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0px;
            top: 0px;
            object-fit: cover;
            mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red);
            opacity: .99;
            pointer-events: none;
      }

      #pic {
            position: absolute;
            z-index: 1;
            width: 38%;
            height: 28%;
            left: -1px;
            top: -1px;
            mix-blend-mode: multiply;
            /* 修改mask和-webkit-mask的渐变效果，让过渡更自然 */
            mask: linear-gradient(to right bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 50%);
            -webkit-mask: linear-gradient(to right bottom, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 50%);
      }

      #pic img {
            width: 100%;
            height: 100%;
      }

      #player {
            position: absolute;
            z-index: 10;
            left: 3%;
            bottom: 3%;
            width: 80px;
            height: 80px;
            border: 3px solid #cccccc;
            border-radius: 50%;
            opacity: 1;
            cursor: pointer;
            pointer-events: auto;
      }

      #player:hover {
            transform: scale(1.1, 1.1);
            filter: drop-shadow(0 0 80px Gold);
      }

      #lrc {
            left: 10%;
            top: 70%;
      }

      #lrcc {
            left: 90%;
            transform: translate(-102%);
            top: 80%;
      }

      #lrc,
      #lrcc {
            --state: paused;
            --motion: cover2;
            --tt: 2s;
            --bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%);
            border: 0px solid black;
            position: absolute;
            z-index: 6;
            font: normal 2.5em 华文行楷;
            color: #222222;
            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 -1px 0);
      }

      #lrcc::before,
      #lrc::before {
            position: absolute;
            content: attr(data-lrc);
            width: 100%;
            height: 100%;
            color: transparent;
            overflow: hidden;
            white-space: pre;
            background: var(--bg);
            clip-path: inset(0% 100% 0 0);
            -webkit-background-clip: text;
            animation: var(--motion) var(--tt) linear forwards;
            animation-play-state: var(--state);
      }

      @keyframes cover1 {
            to {
                clip-path: inset(0 0% 0 0);
            }
      }

      @keyframes cover2 {
            to {
                clip-path: inset(0 0 0 0);
            }
      }
    </style>
    <div id="papa">
      <div id="tit">《情人》—— 刀郎</div>
      <div id="pic"><img id="Img" src="https://cccimg.com/view.php/67b7fea3233182055296a387236ea196.gif" alt="" /></div>
      <img id="player" alt="" src="https://cccimg.com/view.php/0d30afb0057be540ead350e0feaaee6d.png">
      <video id="vid2" src="https://video.699pic.com/videos/61/45/35/YxpXPR43GfWg1528614535.mp4" autoplay loop
            muted></video>
      <video id="vid3" src="https://video.699pic.com/videos/27/86/41/a_67407971346d417322786412164.mp4" autoplay loop
            muted></video>
      <div id="lrc" data-lrc=""></div>
      <div id="lrcc" data-lrc=""></div>
      <audio id="aud" src="https://cccimg.com/view.php/976eebebfa5be1f46b6dae6e061b47f7.mp3" autoplay loop></audio>
      <span id="lrcStr" style="visibility: hidden;">
            情人 - 刀郎
            词：刀郎
            曲：刀郎
            你是我的情人
            像玫瑰花一样的女人
            用你那火火的嘴唇
            让我在午夜里无尽的消魂
            你是我的爱人
            像百合花一样的清纯
            用你那淡淡的体温
            抚平我心中那多情的伤痕
            我梦中的情人
            忘不了甜蜜的香吻
            每一个动情的眼神
            都让我融化在你无边的温存
            你是我的情人
            像玫瑰花一样的女人
            用你那火火的嘴唇
            让我在午夜里无尽的消魂
            来来来来来来
            来来来来来来
            来来来来来来
            来来来来来来
            来来来来来来
            来来来来来来
            来来来来来来
            来来来来来来
      </span>
    </div>
    <script>
      var mState = () => {
            papa.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
            aud.paused ? (vid2.pause(), vid3.pause(), image0.stop()) : (vid2.play(), vid3.play(), image0.play());
            player.title = ['暂停', '播放'][+aud.paused];
      };
      aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
      player.onclick = () => aud.paused ? aud.play() : aud.pause();
      player.style.animationPlayState = aud.paused ? 'paused' : 'running';
      aud.addEventListener('playing', () => mdiv.style.animationPlayState = 'running');
      aud.addEventListener('pause', () => mdiv.style.animationPlayState = 'paused');
      (function () {
            /*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
            let mKey = 0, 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 arr = "";
                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) => {
                lrca = lrcAr;
                lrcAr.length == mKey + 1 ? lrcb = "" : lrcb = lrcAr;//判断最后一句歌词
                let Y = String(mKey / 2).indexOf(".");
                if (Y == -1) {
                  0 == mKey && (lrc.innerHTML = lrca);
                  lrc.dataset.lrc = lrca;
                  lrcc.innerHTML = lrcb;
                  lrcc.dataset.lrc = "";
                  lrc.style.setProperty('--motion', 'cover1');
                  lrc.style.setProperty('--tt', time + 's');
                  lrc.style.setProperty('--state', 'running');
                  lrcc.style.setProperty('--motion', 'cover2');
                } else {
                  lrc.innerHTML = lrcb;
                  lrcc.dataset.lrc = lrca;
                  lrc.dataset.lrc = "";
                  lrcc.style.setProperty('--motion', 'cover1');
                  lrcc.style.setProperty('--tt', time + 's');
                  lrcc.style.setProperty('--state', 'running');
                  lrc.style.setProperty('--motion', 'cover2');
                }
                mKey += 1;
            };
            /*函数 ：处理当前歌词索引 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 mState = () => aud.paused ? (lrc.style.setProperty("--state", "paused"), lrcc.style.setProperty("--state", "paused"), mdiv.style.animationPlayState = "paused") : (lrc.style.setProperty("--state", "running"), lrcc.style.setProperty("--state", "running"), mdiv.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;
                  }
                }
            });
            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;
            };
            aud.addEventListener('pause', () => mState());/*监听暂停事件*/
            aud.addEventListener('play', () => mState());/*监听播放事件*/
            aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
            let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
      })();

      if ('getContext' in document.createElement('canvas')) {
            HTMLImageElement.prototype.play = function () {
                if (this.storeCanvas) {
                  // 移除存储的canvas
                  this.storeCanvas.parentElement.removeChild(this.storeCanvas);
                  this.storeCanvas = null;
                  // 透明度还原
                  image0.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 image0 = document.getElementById("Img");
    </script>
</body>

</html>

起个网名好难 发表于 2025-2-14 18:26

有情人才有快乐{:5_106:}

杨帆 发表于 2025-2-14 19:05

起个网名好难 发表于 2025-2-14 18:26
有情人才有快乐

呵呵，有没有情人都要快乐呦{:4_176:}

红影 发表于 2025-2-14 20:05

真漂亮的制作。祝全天下的情人们今天都快乐{:4_187:}{:4_177:}

梦油 发表于 2025-2-14 21:11

有情人终成眷属。

杨帆 发表于 2025-2-14 21:17

红影 发表于 2025-2-14 20:05
真漂亮的制作。祝全天下的情人们今天都快乐

问好影子，谢谢鼓励与支持，节日快乐{:4_204:}

杨帆 发表于 2025-2-14 21:17

梦油 发表于 2025-2-14 21:11
有情人终成眷属。

问好梦油超版，谢谢鼓励与支持，节日快乐{:4_176:}

小辣椒 发表于 2025-2-14 21:35

欣赏杨帆漂亮的制作{:4_199:}

小辣椒 发表于 2025-2-14 21:36

借美帖有情人终成眷属{:4_187:}

红影 发表于 2025-2-14 21:46

杨帆 发表于 2025-2-14 21:17
问好影子，谢谢鼓励与支持，节日快乐

不客气，问好杨帆，节日快乐{:4_187:}

杨帆 发表于 2025-2-14 23:56

小辣椒 发表于 2025-2-14 21:35
欣赏杨帆漂亮的制作

问好小辣椒，谢谢鼓励与支持，节日快乐{:4_204:}

庶民 发表于 2025-2-15 08:38

祝福。

梦油 发表于 2025-2-15 10:19

杨帆 发表于 2025-2-14 21:17
问好梦油超版，谢谢鼓励与支持，节日快乐

杨帆朋友别客气。

杨帆 发表于 2025-2-15 10:24

庶民 发表于 2025-2-15 08:38
祝福。

问好庶民版主，祝开心天天{:4_176:}

梦江南 发表于 2025-2-15 11:42

欣赏漂亮精美的音画。现在好像对洋人的情人节不怎么红了。

杨帆 发表于 2025-2-15 15:08

梦江南 发表于 2025-2-15 11:42
欣赏漂亮精美的音画。现在好像对洋人的情人节不怎么红了。

呵呵，开心第一，祝节日快乐{:4_176:}
页: [1]
查看完整版本: 情人节快乐