亚伦影音工作室 发表于 2025-1-26 17:42

分手2024【新歌在线】

<style>
#papa { margin: 10px 0 20px calc(50% - 721px); 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; }
#vid {z-index: 2;
        position: absolute;
        width: 60%;
        height: 60%;top:10%;
   left: 35%;
        object-fit: cover;
}

.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">
<video id="vid" src="http://img3.oldkids.cn/upload/2021/07/03/blog_260855907_20210703212925571.mp4" autoplay loop muted></video>
<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-w8/audio/9d/c4/4c/dfca122a12e0d323f3050432b171bc9c/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 = `分手2024
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过我以后 你曾后悔过
离开我以后 你是否也难过
吻过我以后 幸福着你的快乐
夕阳落下后 我们不再手牵手
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过你以后 我快乐足够
离开你以后 却更不自由
我不能左右 爱情的衣袖
忘也忘不掉 黄昏吻你的时候
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
你已经不用说 我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我 不管我的死活
往后的日子我又该怎么活
你已经走远了 我如此的难过
就让眼泪流在你走后那一刻
如果你离开我 能让你快乐
那么还有什么理由挽留呢
心如刀割
`;
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;
</script >

红影 发表于 2025-1-26 18:37

这样的制作很完美，视频漂亮，播放器也漂亮。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-1-26 20:38

亚纶这个视频选的好，位置也是放发好，整体效果棒棒的

小辣椒 发表于 2025-1-26 20:38

播放器的按钮也是漂亮{:4_199:}

杨帆 发表于 2025-1-26 22:51

谢谢精彩分享，祝亚伦老师新春快乐{:4_176:}

老谟深虑 发表于 2025-1-27 15:47

            很精彩，欣赏点赞！
页: [1]
查看完整版本: 分手2024【新歌在线】