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

一袖云

<meta charset="UTF-8">
<style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#880000 url('https://')no-repeat center/cover;width: 1400px; height: 750px;   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/ea6d9c5df04daca8a74ee71470c489f4.gif')no-repeat center/cover; z-index: 2;transition: 1s; -webkit-mask-image: radial-gradient(black 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:300px; 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,#aaa, 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://cccimg.com/view.php/a3d4f619acfaf9276a153682ebc92605.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://cccimg.com/view.php/ccf867f282680e2e78020ebc0df92d7c.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/5cb780c2399cc1713866daffd5164f44.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 = `一袖云 歌手： 刘珂矣
刘珂矣专辑：《半壶纱》
词：刘珂矣/不退居士
曲：刘珂矣/百慕三石
编：百慕三石
谁家炉火热
茶烟起千朵
百草香不过
采药的竹簸
箫翁吹松珀
山阶往如梭
水从寺门过
踏起层层波
唔唔呃
唔唔呃
唔唔呃
呃~~
在山顶揣一袖云
送给彼岸边的你
迟迟你不来风起
吹走山雨
在山顶揣一袖云
送给路上的自己
山外山上云外云
谁在那里
遥望知己
。。。。。。
谁家炉火热
茶烟起千朵
百草香不过
采药的竹簸
远山又着墨
树影空交错
云从掌畔过
送与谁人拓
在山顶揣一袖云
送给彼岸边的你
迟迟你不来风起
吹走山雨
在山顶揣一袖云
送给路上的自己
山外山上云外云
谁在那里
遥望知己
唔唔呃
唔唔呃
唔唔呃
呃~~

`;
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>
<br><br><br><br><br>

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

背景动图不能一键停止

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

这个背景红的应该换蓝淡的漂亮一点

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

这个背景居然是动图，漂亮的{:5_146:}

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

{:5_158:}{:5_154:}{:5_128:}
页: [1]
查看完整版本: 一袖云