醉美水芙蓉 发表于 2025-6-17 21:19:14

漫步特效《南楼令》

<style>
      #mydiv {
            margin: 130px 0 0 calc(50% - 951px);
            width: 1700px;
            height: 900px;
            border: 4px solid rgba(0, 0, 0, .15);
            border-radius: 10px;
            background: gray url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/fd.jpg') no-repeat center/cover;
            box-shadow: 4px 4px 16px rgba(0, 0, 0, .25);
            position: relative;
            display: grid;
            place-items: center;
            overflow: hidden;
      }

      #mydiv::before {
            position: absolute;
            content: attr(data-title);
            /* 修改为左边 */
            left: 17%;
            top: 63%;
            font: bold 1.8em/2em sans-serif;
            color: GoldEnrod;
            text-shadow: 1px 1px #000;
            opacity: .62;
            z-index: 4;
      }

      #iRed {
            position: absolute;
            color: red;
            transition: .5s;
      }

      #iRed:hover {
            font-size: 20px;
            font-weight: bold;
      }

      #myplayer {
            position: absolute;
            cursor: pointer;
            width: 150px; /* 增大宽度 */
            height: 150px; /* 增大高度 */
            /* 修改为与歌曲列表左对齐 */
            left: 200px;
            /* 根据歌曲列表位置调整底部距离，这里将值调小 */
            bottom: 250px;
            z-index: 12;
            mix-blend-mode: screen;
            opacity: .82;
            /* 移除旋转动画 */
      }

      .tbox {
            width: 60px;
            height: 26px;
            text-align: center;
            font: normal 16px/26px sans-serif;
            cursor: pointer;
            z-index: 10;
      }

      .tbox:hover {
            color: pink;
      }

      .tbox:active {
            color: red;
      }

      #vid {
            position: absolute;
            width: 100%; /* 修改为 100% */
            height: 100%; /* 修改为 100% */
            top: 0; /* 修改为 0 */
            left: 0; /* 添加 left: 0 */
            object-fit: cover; /* 保持宽高比并覆盖整个容器 */
            mask: radial-gradient(transparent 20%, red);
            -webkit-mask: radial-gradient(transparent 20%, red);
            mix-blend-mode: screen;
            opacity: .42;
            transform: rotateY(180deg) scaleY(-1); /* 添加 scaleY(-1) 实现垂直翻转 */
      }

      @keyframes rotating {
            to {
                transform: rotate(360deg);
            }
      }

      #songList {
            position: absolute;
            left: 200px;
            top: 100px;
            max-width: 262px;
            color: #eee;
      }

      .songItem {
            cursor: pointer;
            margin-bottom: 5px;
      }

      .songItem:hover {
            color: pink;
      }

      .songItem:active {
            color: red;
      }

      /* 大红灯笼样式 */
      .big-red-lantern {
            position: absolute;
            width: 60px;
            height: 90px;
            background: radial-gradient(circle at center, red 40%, white 100%);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.8;
            animation: fall 3s ease-in-out forwards; /* 加快飘落速度，从5s改为3s */
      }

      /* 大红灯笼顶部白线 */
      .big-red-lantern::before {
            content: '';
            position: absolute;
            top: -50px;
            left: 50%;
            width: 1px;
            height: 50px;
            background-color: white;
      }

      @keyframes float {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-10px);
            }
      }

      @keyframes fall {
            0% {
                top: 0;
                opacity: 0;
            }

            100% {
                top: 900px; /* 根据 #mydiv 的高度调整 */
                opacity: 0.8;
            }
      }
    </style>
   
</head>

<body>
    <div id="mydiv">
      <video id="vid" src="https://img.tukuppt.com/video_show/1863507/00/25/22/5f6c2c5b1c44e.mp4" muted loop></video>
      <audio id="aud" src="" autoplay loop></audio>
      <div id="songList"></div>
      <img id="myplayer" src="https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/2/err.gif" alt="" />
    </div>

    <script>
      let songs = [
            ["赤伶 - 谭晶", "2137661995"],
            ["何者 - 谭晶/HOYO-MiX", "2658660685"],
            ["真爱永在 (TV Version) - 谭晶", "34999296"],
            ["因为有你 - 谭晶", "135430"],
            ["爱的光芒 - 张杰/谭晶", "34179924"],
            ["我愿 - 谭晶", "2702719329"],
            ["唱歌的少年 (Live) - 谭晶", "1875266260"],
            ["不可阻挡 - 谭晶", "1892286692"],
            ["秦风 - 谭晶", "27785283"],
            ["我爱你中国(伴奏) - 谭晶", "294262"],
            ["英雄往来天地间 - 谭晶", "26830193"],
            ["三德歌 - 谭晶", "31680133"]
      ];

      /* 显示歌曲列表 */
      (function () {
            let output = '';
            songs.forEach((, index) => {
                let sUrl = songId.includes('http') ? songId : 'https://music.163.com/song/media/outer/url?id=' + songId;
                output += `<div class="songItem" title="${songName}" onclick="playSong('${sUrl}','${songName}');this.style.color='navy';">${index + 1}. ${songName}</div>`;
            });
            songList.innerHTML = output;

            let firstSong = songs;
            let songName = firstSong, songUrl = firstSong;
            let fullUrl = songUrl.includes('http') ? songUrl : 'https://music.163.com/song/media/outer/url?id=' + songUrl;
            playSong(fullUrl, songName);
      })();

      /* 播放歌曲 */
      function playSong(url, song) {
            aud.src = url;
            mydiv.dataset.title = song;
      };

      /* 控制播放状态 */
      let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'), vid.pause()) : (mydiv.style.setProperty('--state', 'running'), vid.play());
      aud.addEventListener('playing', mState, false);
      aud.addEventListener('pause', mState, false);
      myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

      // 从上面飘落下大红灯笼
      function createBigLantern() {
            const myDiv = document.getElementById('mydiv');
            const myDivLeft = myDiv.offsetLeft;
            const myDivWidth = myDiv.offsetWidth;

            for (let i = 0; i < 5; i++) { // 增加每次生成的大红灯笼数量
                let lantern = document.createElement('div');
                lantern.classList.add('big-red-lantern');
                // 确保大红灯笼在 #mydiv 内部开始飘落
                lantern.style.left = myDivLeft + (Math.random() * (myDivWidth - 60)) + 'px';
                lantern.style.top = myDiv.offsetTop + 'px';
                myDiv.appendChild(lantern); // 将灯笼添加到 #mydiv 内部

                setTimeout(() => {
                  lantern.remove();
                }, 3000);
            }
      }

      setInterval(createBigLantern, 800); // 缩短生成间隔，增加整体数量
    </script>

klxf 发表于 2025-6-18 17:09:17

很有特色，感谢醉美管理员精彩分享

醉美水芙蓉 发表于 2025-6-18 20:49:03

klxf 发表于 2025-6-18 17:09
很有特色，感谢醉美管理员精彩分享

谢谢友友光临！

夏艳妍 发表于 2025-7-7 20:10:30

支持分享，文章独具匠心
页: [1]
查看完整版本: 漫步特效《南楼令》