小辣椒 发表于 2024-7-6 21:11

我在等铁树开花 - 刘阳阳


<style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#880000 url('https://')no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://cccimg.com/view.php/aca589ce52ff10a908f7fc8bedecd1fd.jpg')no-repeat center/cover; z-index: 2;transition: 1s; -webkit-mask-image: radial-gradient(Turquoise 25% ,transparent 75%) ; transform:scale(1);}
@keyframes rotating{50%{filter:hue-rotate(10deg)contrast(110%)brightness(150%);}}
#bjbs:hover { filter: brightness(1.2);filter: hue-rotate(0deg) drop-shadow(0 0 -40px cyan); transform:scale(1.4);}

#jpp{width: 100%; height:380px;position:absolute;z-index: 3;left: 0%;bottom: 0px;mix-blend-mode: lighten; }
#jpp img{ width: 100%; height: 100%;}
#bfq{position: absolute;
width: 400px;
height: 400px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.6);}
#vinyl{position: absolute;
        left:30px;
        bottom: 50px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:250px;
        height:250px;
        border-radius:100%;transition: .5s;box-shadow: 0px 0px 0px 4px #000, 0px 0px 10px 6px #fff;
        background:linear-gradient(-45deg,#333,black,#fff, black,#333);
cursor: pointer;
}
#vinyl:before,#vinyl:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
        border-radius:50%;
}

.label{
        width:120px;
        height:120px;
        border-radius:100%;
        z-index:1;box-shadow: 0px 0px 0px 2px #000, 0px 0px 0px 2px #000;
        background:url(https://boonkiong.com/data/attachment/forum/202407/05/211104kygc93xq9au9cgty.jpg)no-repeat 0px 0px/cover;
       
}
.label:before{
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        background-color: #fff;
        margin:auto;
        display:block;
        top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:0px; left:165px;z-index: 21;background: url('https://pic.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/160px 320px;
      width: 160px;
      height: 320px;
      cursor: pointer;
}
.pink { transform:rotate(0deg);transform-origin: 85% 0%;}
.purple { transform-origin: 85% 0%;margin: 0px -20px;transform:rotate(-20deg);}
#tz { margin: 0px auto; bottom: 60px;width: 100%; height: 300px;position: absolute;z-index: 5;}
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center; font: normal 34px/60px sans-serif; 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="bjbs"> </div>
<div id="jpp"><img id="Img" src="https://s3.krakenfiles.com/uploads/01-06-2024/2qayaV1vDd/image.gif" alt="" /></div>
<div id="tz" data-lrc="别说来生再见 (Live合唱版)"></div>
<div id="bfq"><div id="mplayer" class="pink"title="暂停/播放" ></div>
<div id="vinyl" title="暂停/播放">
        <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://cccimg.com/view.php/bf296e21eea961789c4db6ca8e4e66f8.mp3" autoplay loop></audio>
    <script>
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
vinyl.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));

vinyl.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>vinyl.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>vinyl.style.animationPlayState = 'paused');

bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `我在等铁树开花 - 刘阳阳
作词：林炜航
作曲：林炜航
编曲：漠心藤
和声：王韩一淋
混音：一楠先生
制作人：秦晨阳
企划统筹：杨超越/秦晨阳
出品人：卢庆铭
OP/SP：米喜文化
多想与你雪满华发
却没法让你的冰心融化
赌上青春与你画押
到头来不过是一场笑话
你说十里桃花两人一马
后来谢了繁华生死无话
奈何情深缘浅放不下
在心上留下太深的伤疤
我在等铁树开花
等乌鸦说情话
浪迹天涯奈何情深不达
等到白发能否
忘记我和你往事
那一方流华
我在等铁树开花
等乌鸦说情话
再多承诺终究难成妆嫁
奈何桥下
借一杯酒换了无牵挂
~Music~
多想与你雪满华发
却没法让你的冰心融化
赌上青春与你画押
到头来不过是一场笑话
你说十里桃花两人一马
后来谢了繁华生死无话
奈何情深缘浅放不下
在心上留下太深的伤疤
我在等铁树开花
等乌鸦说情话
浪迹天涯奈何情深不达
等到白发能否
忘记我和你往事
那一方流华
我在等铁树开花
等乌鸦说情话
再多承诺终究难成妆嫁
奈何桥下
借一杯酒换了无牵挂
我在等铁树开花
等乌鸦说情话
浪迹天涯奈何情深不达
等到白发能否
忘记我和你往事
那一方流华
我在等铁树开花
等乌鸦说情话
再多承诺终究难成妆嫁
奈何桥下
借一杯酒换了无牵挂
☆谢谢欣赏☆
`;
getAr(lrc);
</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>

小辣椒 发表于 2024-7-6 21:12

jpg可以，gif背景不能一键停止

liumang 发表于 2024-7-7 01:45

小辣椒 发表于 2024-7-6 21:12
jpg可以，gif背景不能一键停止

测试帖？

liumang 发表于 2024-7-7 01:46

图图漂亮，歌曲也是好听{:5_150:}{:5_150:}{:5_150:}
页: [1]
查看完整版本: 我在等铁树开花 - 刘阳阳