论坛 › 欢乐水吧 › 【玫瑰。图】那晚的风

玫瑰 发表于 2026-8-5 21:37

【玫瑰。图】那晚的风

本帖最后由 玫瑰 于 2026-8-5 21:39 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_2344202">

<style>
      #bj {
            position: relative;
            width: 1186px;
            height: 700px;
            margin-left: 40px;
            margin-top: 100px;
            overflow: hidden;
            background: url() no-repeat center / cover;
      }
.intro {margin: 0px0px;
      width: 100%;
      height:100%;
      position: absolute;
background: url(<a href="https://mxjy.net/data/attachment/forum/202509/03/184528ufejkpjzxz3vnkxf.jpg" target="_blank">https://mxjy.net/data/attachment ... id8iiy7j4vdklk8.jpg</a>), linear-gradient(60deg, #9c315e, #e626e8, #5b8cfa, #5bfacf);
background-size: cover;
mix-blend-mode: initial; /*初始*/
animation: hue-rotate 8s linear infinite;
}
@keyframes hue-rotate {
from {opacity:0.85;
   filter: hue-rotate(0);
}
to {
   filter: hue-rotate(360deg);
}
}
.lyrics{margin: 0;
            top: 90%;
            left: 50%;
    transform: translate(-50%, -50%);
            height: 100px; /* 调整高度，只容纳当前歌词 */
                 text-align: center;
             position: absolute;
      }
            .lyric-line{
            width: 100%;
            position: relative;
            height: 60px;
            overflow: visible;
   font: 300 45px '华文楷体', sans-serif;
            line-height: 60px;
         text-align: left;
            white-space: nowrap; /* 禁止换行 */
            
            filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);


      }

      .lyric-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            overflow: hidden;
      color: #8B4513;
            height: 100%;
            white-space: nowrap;

      }

      .lyric-original {
             color: #2E8B57;
            white-space: nowrap;
            
      }

      #logo {
         position: absolute;
      font-size: 1.5rem;
      font-weight: bold;
      color:#ffffff;
      display: flex;
   left: 5%;
       top: 3%;

    }

      #logo1 {
         position: absolute;
      font-size: 1.5rem;
      font-weight: bold;
      color:#f986fa;
      display: flex;
   left: 5%;
       top: 8%;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);
    }
   
   #logo::before {
      content: "";
      margin-right: 0.5rem;
      font-size: 1.8rem;
      text-align: center;
    }
#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      background:#0000;
transform:scale(.4);bottom: -100px;
   left: -120px;z-index: 20;}
#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear;
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   cursor: pointer;
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 2px #444;
background:#880000 url('') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url(''https://mxjy.net/data/attachment/forum/202509/02/204809xid8iiy7j4vdklk8.jpg)no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}
#prog {position: absolute;z-index: 8;
      width: 78%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 46px;
left:12%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 42px;
      right: 40px;}
</style>
    <audio id="aud" src=".mp3" autoplay="" loop=""></audio>
<div id="bj">
<div class="intro"><img src="https://img.wyc520.com.cn/data/attachment/forum/202608/05/213303noi674xxffdbia49.jpg" border="0"></div>
    <div id="logo"></div>
    <div id="logo1"><br></div><img src="https://mxjy.net/data/attachment/forum/202509/03/184528ufejkpjzxz3vnkxf.jpg" width="1200" _height="803" border="0" style="background-color: initial;"><br><div id="logo1"><br></div><div id="logo1"></div><div id="logo1"><br></div>
      <div class="lyrics">
            <div class="lyric-line">
                  <div class="lyric-mask"><br></div></div></div><div id="bfq">
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg">00:00|00:00</div>
</div>
      
`</td></tr></tbody></table></div>


<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1831769192.mp3" autoplay="" loop=""></audio>

玫瑰 发表于 2026-8-5 21:37

{:4_204:}{:4_204:}{:4_204:}

玫瑰 发表于 2026-8-5 22:07

https://img.wyc520.com.cn/data/attachment/forum/202608/05/213303noi674xxffdbia49.jpg

玫瑰 发表于 2026-8-5 22:07

https://img.wyc520.com.cn/data/attachment/forum/202608/05/213303noi674xxffdbia49.jpg

玫瑰 发表于 2026-8-5 22:07

https://img.wyc520.com.cn/data/attachment/forum/202608/05/213303noi674xxffdbia49.jpg

查看完整版本: 【玫瑰。图】那晚的风