亚伦影音工作室 发表于 2025-2-4 16:44:50

亚伦影音《离别的车站》

<style>
#papa { margin: 150px 0 20px calc(50% - 661px);width:1186px; height:720px;background: #800000;position: relative;overflow: hidden; }

#dt{ width:100%; height: 100%;position: absolute;top:0%; left:0%;}
#dt img{ width:100%; height: 100%;}

#mypic {top:8%; left:48%;z-index: 2;
display: block;position: absolute;
    width: 150px; height: 150px;
    background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/1950px 150px;
animation: heart-burst steps(13) 2s infinite;mix-blend-mode: difference;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -1950px 0;}
}

#mxpic {top:32%; left:18%;z-index: 2;
display: block;position: absolute;
    width: 120px; height: 120px;transform: rotateY(180deg);
    background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/1560px 120px;
animation: burst steps(13) 2s infinite;mix-blend-mode: difference;
}
@keyframes burst {
0% {background-position: 0px 0;}
100% {background-position: -1560px 0;}
}

#pa{margin: 450px 0px ;position:absolute;width: 200px; height: 150px; overflow: hidden;right: 42px;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
.gc{position: absolute;width:1186px;
          top: 90%;
            left: 0%;
            text-align: center;
            list-style-type: none;
            height: 200px;
            line-height: 30px;
            }
.lrc{
    width: 500px;
    height: 140px;
    overflow: hidden;bottom: 60%;
    display: block; position:absolute;;z-index: 5;
    margin: 0px 180px;}
.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: 30px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
    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); }
</style>
<div id="papa">
<div id="mypic" ></div>
<div id="mxpic" ></div>
<div id="dt" title="亚伦动图"><img id="Img" src="https://pic1.imgdb.cn/item/67a1c202d0e0a243d4fbc701.gif" alt="" /></div>
<div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>

</div>

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

<div class="gc">
<marquee id="marquee" behavior="scroll" scrollAmount=10 width=1186 height=100 > <font face="heiti" size="4" color="#fff"><p style="text-align:left;">亚伦影音《离别的车站》&nbsp;&nbsp;作词：xx&nbsp;&nbsp;作曲：xx&nbsp;&nbsp;演 唱：赵薇 &nbsp;&nbsp;歌词整理：亚伦&nbsp;&nbsp;出品：亚伦影音工作室 </p></font></marquee>
   </div>
</div>
<audio id="aud" src="https://img2.oldkids.cn/upload/2025/02/04/blog_260855907_20250204163126457.mp3" autoplay loop></audio>
<br>


<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.display= 'none',cndpt.style.display= 'block',marquee.start(),mypic.style.animationPlayState = 'running',mxpic.style.animationPlayState = 'running',image.play()) : (aud.pause(),enopg.style.display= 'block',cndpt.style.display='none', marquee.stop(),mypic.style.animationPlayState = 'paused',mxpic.style.animationPlayState = 'paused',image.stop());
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
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)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
                });
      </script >
<script >
var lrc = `离别的车站
演唱:赵薇by:菱萱
当你紧紧握着我的手
再三说着珍重珍重
当你深深看着我的眼
再三说着别送别送
当你走上离别的车站
我终于不停的呼唤呼唤
眼看你的车子越走越远
我的心一片凌乱凌乱
千言万语还来不及说
我的泪早已泛滥泛滥
从此我迷上了那个车站
多少次在那儿痴痴的看
离别的一幕总会重演
你几乎把手儿挥断挥断
何时列车能够把你带回
我在这儿痴痴的盼
你身在何方我不管不管
请为我保重千万千万
(music)
当你走上离别的车站
我终于不停的呼唤呼唤
眼看你的车子越走越远
我的心一片凌乱凌乱
千言万语还来不及说
我的泪早已泛滥泛滥
从此我迷上了那个车站
多少次在那儿痴痴的看
离别的一幕总会重演
你几乎把手儿挥断挥断
何时列车能够把你带回
我在这儿痴痴的盼
你身在何方我不管不管
请为我保重千万千万
千言万语还来不及说
我的泪早已泛滥泛滥
从此我迷上了那个车站
多少次在那儿痴痴的看
离别的一幕总会重演
你几乎把手儿挥断挥断
何时列车能够把你带回
我在这儿痴痴的盼
你身在何方我不管不管
请为我保重千万千万
       
`;
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 >
<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("Img");
</script>

zlpi@163.com 发表于 2025-2-5 11:43:56

欣赏佳作

klxf 发表于 2025-2-5 13:11:17

谢谢亚伦老师精彩分享:)

醉美水芙蓉 发表于 2025-2-5 20:46:45

欣赏亚伦老师新作品！

醉美水芙蓉 发表于 2025-2-5 20:47:02

这个动图很奇特！

夏艳妍 发表于 2025-2-14 22:36:08

赞一个!
页: [1]
查看完整版本: 亚伦影音《离别的车站》