论坛 › 欢乐水吧 › 为爱流泪的女人 (DJ何鹏版) - 陈瑞

亚伦影音工作室 发表于 2025-4-24 12:30

为爱流泪的女人 (DJ何鹏版) - 陈瑞

本帖最后由 亚伦影音工作室 于 2025-4-27 12:41 编辑 <br /><br /><style>
      #bj {
            position: relative;
            width: 550px;
            height:850px;
            margin: 10px 120px;
            overflow: hidden;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 3px #000;
            background:#800 url('https://file.moyublog.com/phone_wallpapers_titlepic/m5j4rpi13ur.jpg') no-repeat center / cover;--state:paused;
      }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 3s linear infinite var(--state);}
@keyframes rod{0% {opacity: .6;background: radial-gradient(circle 0px at 50% 50%, rgba(3, 3, 140, 0) 0%,rgba(60, 219, 231, 0) 10%,rgba(2, 58, 34, 0.73) 100%);}

50% {opacity: .2;background: radial-gradient(circle 0px at 50% 50%, rgba(3, 3, 140, 0) 0%,rgba(60, 219, 231, 0) 10%,rgba(58, 7, 2, 0.73) 100%);}

100% {opacity: 5;background: radial-gradient(circle 0px at 50% 50%, rgba(3, 3, 140, 0) 0%,rgba(60, 219, 231, 0) 10%,rgba(2, 4, 92, 0.78) 100%);}
}
#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:0%;background:#0000;
   left: 10%;z-index: 20;}

#tu{   
      position:absolute;
      width: 300px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;
      height:300px;border-radius: 10px;
      top:10%;background:#000 url('https://img2.kuwo.cn/star/albumcover/500/73/4/3127652553.jpg') no-repeat center / cover;
   left: 2%;z-index: 2;}
#cp{   
      position:absolute;
      width: 260px;border-radius: 50%;
      height:260px;animation: rotating 6s infinite linear var(--state);
      top:15%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   
   left: 41%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 260px;
height: 260px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://img2.kuwo.cn/star/albumcover/500/73/4/3127652553.jpg') 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%;
}
#bnt{margin: 240px 240px ; width: 30px; height: 30px;position: relative; cursor: pointer; }
#cndpt{position: absolute; width: 30px; height: 30px;
background:#fff;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#enopg{ position: absolute;width: 30px; height: 30px;
opacity:0; background:#fff;
   clip-path: polygon(75% 50%, 0 0, 0 100%)
}

.lrc {z-index: 1;
            position: absolute;
            top: 50%;
            left: 5%;
         
            width: 540px;
            height: 350px;
            overflow: hidden;

      }

      .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }

      .lrc #ul li {
            font-size: 20px;
            color: #fff;
            font-weight: 400;
            transition: .3s all ease;
         list-style-type: none;
    text-align: center;
       display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
             margin: 0 auto;
            cursor: pointer;
      }

      .lrc #ul li.active {
         font-size: 25px;
            color: #EE7700;
            font-weight: 550;
             text-align: center;
            
      }
</style>
<div id="bj">
<div id="dh" ></div>
<div id="bfq">
<div id="tu">
<div id="bnt" >
<div id="cndpt"></div>
<div id="enopg" ></div>
</div>
</div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>
<div class="lrc">
            <ul id="ul"></ul>
      </div>
</div>
<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w7/audio/f4/e5/8a/20432af9e7dc1d624c713467dd1fc6e9/audio.mp3" loop autoplay ></audio>

<script>
      let lrc = `为爱流泪的女人 (DJ何鹏版) - 陈瑞
词：高羽
曲：陈伟
编曲：阿浩
制作人：陈伟
出品人：陈伟
空落落的房间有一点冷
好像你此刻 冰凉的眼神
祈求你给我 最后一个吻
留做以后 回忆的标本
曾以为会是你最爱的人
今天才知道 现实多残忍
我忍着不让 自己哭出声
却又止不住 泪雨纷纷
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
空落落的房间有一点冷
好像你此刻 冰凉的眼神
祈求你给我 最后一个吻
留做以后 回忆的标本
曾以为会是你最爱的人
今天才知道 现实多残忍
我忍着不让 自己哭出声
却又止不住 泪雨纷纷
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
我这个为爱 流泪的女人
总是握不住 匆匆的缘分
全心的投入 那么的认真
所有委屈 默默独自吞
我这个为爱 流泪的女人
总是舍不得 埋怨一个人
你给的伤害 无论有多深
学会了流泪 却学不会恨
`;
      let lrcArr = lrc.split('\n');
      let result = [];
      var audio = document.querySelector("#audio"),
            ul = document.querySelector("#ul"),
            container = document.querySelector(".lrc");
            

      for (let i = 0; i < lrcArr.length; i++) {
            var lrcData = lrcArr.split(']');
            if (lrcData.length < 2) continue;
            var lrcTime = lrcData.substring(1);
            var obj = {
                time: parseTime(lrcTime),
                word: lrcData.trim()
            }
            result.push(obj);
      }

      function parseTime(lrcTime) {
            let lrcTimeArr = lrcTime.split(":");
            return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
      }

      function getIndex() {
            let time = audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > time) {
                  return i - 1;
                }
            }
            return result.length - 1;
      }

var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1263fc=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x77\x6F\x72\x64","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x74\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5d03x2=document]();for(let _0x5d03x3=0;_0x5d03x3< result];_0x5d03x3++){let _0x5d03x4=document](__Ox1263fc);_0x5d03x4]= result];_0x5d03x4](__Ox1263fc,function(){audio]= result]});_0x5d03x2](_0x5d03x4)};ul](_0x5d03x2)}(function(_0x5d03x5,_0x5d03x6,_0x5d03x7,_0x5d03x8,_0x5d03x9,_0x5d03xa){_0x5d03xa= __Ox1263fc;_0x5d03x8= function(_0x5d03xb){if( typeof alert!== _0x5d03xa){alert(_0x5d03xb)};if( typeof console!== _0x5d03xa){console](_0x5d03xb)}};_0x5d03x7= function(_0x5d03xc,_0x5d03x5){return _0x5d03xc+ _0x5d03x5};_0x5d03x9= _0x5d03x7(__Ox1263fc,_0x5d03x7(_0x5d03x7(__Ox1263fc,__Ox1263fc),__Ox1263fc));try{_0x5d03x5= __encode;if(!( typeof _0x5d03x5!== _0x5d03xa&& _0x5d03x5=== _0x5d03x7(__Ox1263fc,__Ox1263fc))){_0x5d03x8(_0x5d03x9)}}catch(e){_0x5d03x8(_0x5d03x9)}})({})

      createElements();
      let containerHeight = container.clientHeight;
      let liHeight = ul.children?.clientHeight || 50;
      let minOffset = 0;
      let maxOffset = ul.clientHeight - containerHeight;

      function setOffset() {
            const index = getIndex();
            if (index < 0) return;

            const liHeight = ul.children?.clientHeight || 50;
            const offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            ul.style.transform = `translateY(${-offset}px)`;

            ul.querySelectorAll('.active').forEach(li => li.classList.remove('active'));
            ul.children?.classList.add('active');

            const currentLyric = result.word.trim();
            if (!currentLyric) return;
            const nextTime = result?.time || audio.duration;
            const duration = nextTime - result.time;
            const charIndex = duration > 0 ?
                Math.min(Math.floor((audio.currentTime - result.time) / (duration / currentLyric.length)), currentLyric.length) :
                currentLyric.length;
}

      let rafId;
      audio.addEventListener("timeupdate", () => {
            rafId = requestAnimationFrame(setOffset);
      });

var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),bnt.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),bnt.title = '点击暂停' );


audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());

bnt.onclick = () => audio.paused ? (audio.play(),enopg.style.opacity= '0',cndpt.style.opacity = '1') : (audio.pause(),enopg.style.opacity = '1',cndpt.style.opacity = '0');

</script>

亚伦影音工作室 发表于 2025-4-24 14:36

<style>
.radial-gradient {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
.radial-gradient:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}
</style>
<div class="radial-gradient"></div>

亚伦影音工作室 发表于 2025-4-24 14:36

纯代码唱片

本帖最后由 亚伦影音工作室 于 2025-6-2 13:16 编辑 <br /><br /><style>
#gp{
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
    animation: rang 6s infinite linear;
}
@keyframes rang { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 0px;
top: 0px;
position: absolute;
width: 262px;
height: 262px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);
border-radius: 50%;
}

#gp:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}
</style>
<div id="gp"><div class="overlay"></div></div>

红影 发表于 2025-4-24 20:44

这代码唱片制作很漂亮，带着光影和高亮色，帖子里的还加上了头像。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-4-24 20:45

这又是一种风格的制作呢，很漂亮{:4_199:}

查看完整版本: 为爱流泪的女人 (DJ何鹏版) - 陈瑞