亚伦影音工作室 发表于 2025-1-27 21:22:14

为你祈祷(DJ 默涵版)-魏新雨

<style>
#papa { margin: 10px 0 20px calc(50% - 720px); background:#800000;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;--state: running; }

zxx-slide { top:15%;
   left: 35%;
    width: 820px; height: 550px;
   position: absolute;
}
.zxx-slide-a {cursor: default;
      pointer-events:none;
    position: absolute;
   
}
.zxx-slide-a.in {z-index: 1;
    animation-duration: 3s; animation-name: brightnessIn;
    }
.zxx-slide-img {
   width: 100%; height: 100%;
}

@keyframes brightnessIn {
    0%   {opacity: 1;transform:translate(0%,0%)scale(0)rotate(360deg); }
   
50% {opacity: 1; transform:translate(0%,0%)scale(.6);}
100% {opacity: 1; transform:translate(0%,0%)scale(1);}
}



.turntable{
    position: absolute;
display: block;
top:30%;
   left: 4%;
background:#660000;
width: 310px;
height:280px;
border-radius: 5%;
box-shadow: inset 0 0 8px #000;
}

.record {
position: absolute;
left: 35px;
top: 35px;
width: 200px;
height: 200px;
background: black;
border-radius: 50%;
animation: spin 2s infinite linear var(--state);
}
@keyframes spin {
0% {transform: none;
}
100% {transform: rotate(360deg);
}
}

.record::before {
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 180px;
height: 180px;
background: repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
border-radius: 50%;
}

.overlay {
content: '';
left: 35px;
top: 35px;
position: absolute;
width: 200px;
height: 200px;
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: 55px;
height: 55px;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #F796A8), to(#F796A8));
background: linear-gradient(white, white 50%, #F796A8 50%, #F796A8);
border-radius: 50%;
}


.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #333;
border-radius: 50%;
}

.inner::after {
content: '亚伦影音 yinyue changdie';
width: 55px;
text-align: center;
font-family: sans-serif;
font-size: 8px;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
}

#arm-holder {
position: absolute;
width: 40px;
height: 40px;
background: #111;
border-radius: 50%;
right: 20px;
top: 40px;
}

#arm-holder::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #999;
border-radius: 50%;
}

#arm {
position: absolute;
right: 13px;
width: 50px;
top: 10px;
height: 110px;
border: 10px solid #999;
transform: skew(-20deg, -20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 30% 0;
animation: armTwitch 1s infinite var(--state);
animation-direction: alternate-reverse;
}
@keyframes armTwitch {
0% {transform: skew(-20deg, -20deg);
}
100% {transform: skew(-20deg, -20deg) rotate(1deg);
}
}

#arm::before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: gray;
transform: skew(20deg, 20deg) rotate(75deg);
top: 98px;
left: -10px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
#armm {
position: absolute;
right: 16px;
width: 38px;
top: 20px;
height: 150px;
border: 8px solid #999;
transform: skew(-20deg, -20deg)rotate(-20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 45% 0%;
opacity:0;
animation-direction: alternate-reverse;
}


#armm::before {
content: '';
position: absolute;
width: 25px;
height: 22px;
background: gray;
transform: skew(10deg, 20deg) rotate(80deg);
top: 142px;
left: -16px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.dial {
position: absolute;
bottom: 20px;
right: 20px;
width: 25px;
height: 25px;
background: #333;
border-radius: 50%;
}

.dial::before {
content: '';
left: 50%;
transform: translateX(-50%);
top: 2px;
position: absolute;
width: 2px;
height: 5px;
background: white;
border-radius: 50%;
}

    #bnt{left: 20px;bottom: 20px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
.progress {display: flex;align-items: center;
      justify-content: space-between;width: 100%;
      position:absolute;bottom: 10px;
   left: 0px;height:30px;
    }

    .progress-bar {bottom: 0px;
      position:relative;
      width: 100%;
      height: 3px;
      background-color: #eee;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 12px sans-serif; margin: 0 10px;}
.end{color: #fff; font: 400 12px sans-serif;margin: 0 10px;}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;bottom: 0px;
    display: block; position:absolute;z-index: 5;
    margin: 0px auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 50px; cursor: pointer;right: 25px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">
<zxx-slide >
   <a href class="zxx-slide-a" ><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2025-01-08/b8321882331e335109c86ee2b486e765.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2024-11-20/466f13e003ec336b33663b65b5ea99ef.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2023-01-25/42a83306da9b25c1e516ca1cdab7c6b4.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2021-12-03/4v5cpnwrlpq.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2024-03-27/773067a52fb4ec11b44f8c3988f3a9bc.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://file.moyublog.com/d/file/2021-08-13/x2syt5cahny.jpg"></a>
</zxx-slide>
<div class="turntable">
    <div class="record">
      <div class="inner"></div>
    </div>
    <div class="overlay"></div>
    <div id="arm-holder">
      <div id="arm"></div>

      <div id="armm"></div>
    </div>

    <div class="dial"></div>

<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
</div>


<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
   </div>
<audio id="aud"autoplay>
            <source src="https://s2.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.mp3" type="audio/mpeg">
         </audio>

<script>


bnt.onclick = () => aud.paused ?(aud.play(),armm.style.opacity= '0',arm.style.opacity = '1',picc.style.opacity= '0',pic.style.opacity = '1',vid.play()) : (aud.pause(),armm.style.opacity = '1',arm.style.opacity = '0',picc.style.opacity= '1',pic.style.opacity = '0',vid.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')};
aud.onplaying = aud.onpause = () => mState();

const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>
<script >
var lrc = `为你祈祷(DJ 默涵版)-魏新雨
词：崔伟立
曲：崔伟立
宣发：张丹娴| 廖文婷
统筹：唐欣宇
出品人：胡伟
OP：深圳启韵文化传媒有限公司
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠

`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;

var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
    var timerSlide = null;
    var indexSlide = 0;
    container.addEventListener('mouseover', function () {
      clearTimeout(timerSlide);
    });
    container.addEventListener('mouseout', function () {
      clearTimeout(timerSlide);
      funSlide();
    });
    // 对应的元素
    var eleSlides = [].slice.call(container.querySelectorAll('a'));
    var eleButtons = [].slice.call(container.querySelectorAll('button'));
   
var funSlide = function() {
      eleSlides.forEach(function (slide, index) {
            if(!aud.paused) {
                if (indexSlide == index) {
                  slide.classList.add('in');
                  
                } else if (slide.classList.contains('in')) {
                  slide.classList.remove('in');
                }
            }
      });


      timerSlide = setTimeout(function () {
            indexSlide++;
            if (indexSlide == eleSlides.length) {
                indexSlide = 0;
            }
            funSlide();
      }, 8000);
    }

    indexSlide++;
    setTimeout(funSlide, 500);
});


</script >



klxf 发表于 2025-1-27 21:47:08

极美的享受，祝福老师新春快乐:)

顶不顶个球 发表于 2025-2-1 15:07:40

谢谢楼主的辛苦分享
页: [1]
查看完整版本: 为你祈祷(DJ 默涵版)-魏新雨