小辣椒 发表于 2024-4-30 21:04

恨自己不懂心疼自己 TO：走过岁月


<style>
#papa { margin: 150px 0 0px calc(50% - 721px);
        width: 1271px;
        height: 630px;
        background:#000000 ;
        no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; user-select: none; z-index: 1; --opt: .25;}
}
#mb{ position: absolute; width: 100%; height: 100%; top:0%;   opacity: 1;z-index: 2; background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);}
#t{position: absolute;top:10px; left:140px;width: 400px; height: 250px;z-index:4;mix-blend-mode:lighten;}
#t1{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:3;}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {z-index: 80;
        position: absolute;
        top:79.8%; left:30.1%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #0129a5;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0px;
        height: 0px;
        left: 47px;
        border-width: 4px 4px;
        border-color: transparent transparent transparent #0129a5;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 8px;
                left: 32px;
        border-width: 0 3px 0 3px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }
#tmsg {position: absolute;z-index: 91;
      font: normal 12px sans-serif;
      color: #0129a5;
         top:78%;
      left:15%;}

#prog {position: absolute;z-index: 91;
      width: 17.5%;
      height: 0.3%;
      cursor: pointer;
         top:82.2%;
color: #0c6dbe
box-shadow: 0px 0px 0.1px 0.1px #000000;
         left:13.2%;
border-radius: 2px;}


#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{ --w: 25%; width: var(--w); overflow: hidden; color: #0129a5; position: absolute; left:23%;top:87%;font-size: 15px; z-index: 21; word-break: keep-all; white-space: nowrap; animation: bt 14s linear infinite;}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">恨自己不懂心疼自己 (Live合唱版)</div>
<div id="t"><img id="tu" src="https://vvlk.oss-cn-hangzhou.aliyuncs.com/fhy.gif" width="100%" height="100%"></div>
<div id="t1"><img id="tu1" src=" https://xlaj.cn/assets/file/zp/20240424220352.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/3c97-audiofreehighqps/B6/08/GKwRIJEJf0vSACAAAAKdMcs_.m4a" loop autoplay></audio>

<style type="text/css">
.lrc {z-index: 20;
    width: 100%;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#cccccc 1px 0 0)drop-shadow(#cccccc 0 1px 0)drop-shadow(#cccccc -1px 0 0) drop-shadow(#cccccc 0 -1px0);
    display: block;position: absolute;top:38%; left:-15.5%;z-index: 5;
    margin: 0 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: 35px;
    color: #ff0000;
text-align: center;
}
</style>
<script >
var lrc = `恨自己不懂心疼自己 (Live合唱版)
歌手：恋特特
作词Lyrics/作曲Composer：迷
编曲Music Arrangement：迷
混音Mixed by：迷
合唱团Choir：迷音文化合唱团
制作人Producer：迷音文化
统筹Coordinator：迷音文化
出品Publisher：迷音文化
发行Distributed by：迷音文化    15
恨自己不懂心疼自己
总在不断的为难自己
假如有一天你会老去
有谁会在乎你的消息
恨自己不懂心疼自己
总是把别人放在心里
当青春只剩岁月痕迹
是否还有人记得你记得你
回想自己的一生
总是活在别人世界里
伤了痛了哭了醉了碎了
委屈的心真的好累
回想自己的一生
有过几段糟糕的感情
想了爱了恨了分了走了
为何自己总伤害自己
恨自己不懂心疼自己
总在不断的为难自己
假如有一天你会老去
有谁会在乎你的消息
恨自己不懂心疼自己
总是把别人放在心里
当青春只剩岁月痕迹
是否还有人记得你记得你
。。。。。。
回想自己的一生
有过几段糟糕的感情
想了爱了恨了分了走了
为何自己总伤害自己
恨自己不懂心疼自己
总在不断的为难自己
假如有一天你会老去
有谁会在乎你的消息
恨自己不懂心疼自己
总是把别人放在心里
当青春只剩岁月痕迹
是否还有人记得你记得你
。。。。
`;
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;
    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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
                aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg,#0129a5,#0129a5, #0129a5 ' + aud.currentTime / aud.duration * 100 + '%, rgb(119, 179, 126) 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</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 = '';image1.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("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

小辣椒 发表于 2024-4-30 21:06

@走过岁月

岁月昨天的粒子频谱加进去了，昨天试了深色背景比较漂亮，这个是现成做好的，就加进去看看效果，这个效果也是不错的，感谢岁月的精美礼物{:4_205:}

小九 发表于 2024-4-30 21:26

沙发没抢到{:4_189:}

小辣椒 发表于 2024-4-30 21:28

小九 发表于 2024-4-30 21:26
沙发没抢到

小九沙发一起坐{:4_179:}

小辣椒家里大沙发{:4_173:}

走过岁月 发表于 2024-4-30 21:35

小辣椒真是速度，这么快就出效果

走过岁月 发表于 2024-4-30 21:38

真不错，粒子频谱跟背景颜色也很搭配

走过岁月 发表于 2024-4-30 21:39

画面音画做得也漂亮，小辣椒很棒，样样精通

走过岁月 发表于 2024-4-30 21:40

谢谢小辣椒的礼物，开心 {:4_179:}

小辣椒 发表于 2024-4-30 22:02

走过岁月 发表于 2024-4-30 21:35
小辣椒真是速度，这么快就出效果

都是前面已经做好的，今天加个效果就出来了{:4_189:}

小辣椒 发表于 2024-4-30 22:02

走过岁月 发表于 2024-4-30 21:38
真不错，粒子频谱跟背景颜色也很搭配

这个粒子频谱以后我就晓得配怎么样的背景了

小辣椒 发表于 2024-4-30 22:03

走过岁月 发表于 2024-4-30 21:39
画面音画做得也漂亮，小辣椒很棒，样样精通

哇塞，岁月也是会夸人了{:4_170:}

小辣椒 发表于 2024-4-30 22:04

走过岁月 发表于 2024-4-30 21:40
谢谢小辣椒的礼物，开心

应该谢谢岁月的3个精美粒子效果，你这么忙还做这个礼物，小辣椒太开心了{:4_179:}

红影 发表于 2024-4-30 22:21

亲爱的太快了，昨天的效果今天就做好帖子了。这个运用非常浑然天成，太棒了{:4_199:}

樵歌 发表于 2024-5-1 07:12

临阵磨枪，越磨越光！{:4_178:}

亚伦影音工作室 发表于 2024-5-1 07:13

漂亮的频谱，只是无法一键全控！

樵歌 发表于 2024-5-1 07:13

既然歌名说说了，你昨天又玩疯了。{:4_361:}

上海朝阳 发表于 2024-5-1 09:00

做得很好看

走过岁月 发表于 2024-5-3 13:04

小辣椒 发表于 2024-4-30 22:03
哇塞，岁月也是会夸人了

好作品要赞

走过岁月 发表于 2024-5-3 13:05

小辣椒 发表于 2024-4-30 22:04
应该谢谢岁月的3个精美粒子效果，你这么忙还做这个礼物，小辣椒太开心了

不客气 {:4_179:}
页: [1]
查看完整版本: 恨自己不懂心疼自己 TO：走过岁月