论坛 › 欢乐水吧 › 半壶纱

醉美水芙蓉 发表于 2023-6-24 09:54

半壶纱

本帖最后由 醉美水芙蓉 于 2023-6-24 09:54 编辑 <br /><br /><style>
#papa {
        margin: 130px -300px;
        width: 1164px;
        height: 640px;
        background: url('https://www.yiyuen.com/e/file/view/596951') no-repeat center/cover;
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }
#ptpu{ width: 100%;
        height: 100%;
top: 0%;left: 0%;cursor: pointer;
position:absolute;opacity: 1;
      z-index: 4;
      
}
#canv {filter:hue-rotate(0deg)contrast(140%)brightness(80%);
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 4;opacity: 0;
}
#vid { display: none; }

#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
        position: absolute;z-index: 6;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 3em 华文行楷;
        color: #055306;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}

@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

.wenzi { position: absolute; left: 15%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font: normal 2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}

</style>

<div id="papa">
      <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="ptpu"><img id="testImg"src="https://www.yiyuen.com/e/file/view/596958" width="100%" height="100%"></div>

        <divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" > <div id="but">
<css-doodleid="mplayer">
          :doodle {
                @grid: 2 / 300px 60px;
            position: absolute;z-index: 40;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 35px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 25% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: clover 5;
                @place: 50% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 75% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 50% 80%;
                @size: 100% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">半壶纱</div>

</div>
</div>
<canvas id="canv"></canvas>
        <span id="fullscreen">全屏观赏</span>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/27/21092708394423902689." autoplay loop muted></video>
        <audio id="aud" src="https://www.qqmc.com/mp3/music150323454.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<script>

(function() {
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
      mplayer.onclick = (e) => {
                if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
                if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
      }
})();


</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
半壶纱
作词：刘珂矣 百慕三石
作曲：刘珂矣 百慕三石
编曲：百慕三石
合音：刘珂矣 百慕三石
录音/缩混：百慕三石
演唱：刘珂矣
LRC编辑：醉美水芙蓉
墨已入水 渡一池青花
揽五分红霞 采竹回家
悠悠风来 埋一地桑麻
一身袈裟 把相思放下
十里桃花 待嫁的年华
凤冠的珍珠 挽进头发
檀香拂过 玉镯弄轻纱
空留一盏 芽色的清茶
倘若我心中的山水 你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草 岁月催人老
风月花鸟 一笑尘缘了

十里桃花 待嫁的年华
凤冠的珍珠 挽进头发
檀香拂过 玉镯弄轻纱
空留一盏 芽色的清茶
倘若我心中的山水 你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草 岁月催人老
风月花鸟 一笑尘缘了
倘若我心中的山水 你眼中都看到
我便一步一莲花祈祷
怎知那浮生一片草 岁月催人老
风月花鸟 一笑尘缘了
怎知那浮生一片草 岁月催人老
风月花鸟 一笑尘缘了
谢谢欣赏！
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</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("testImg"),
button = document.getElementById("but");
button.onclick = function() {
      if (this.value == '') {
             image.play();
            this.value = '.';
      } else {
             image.stop();
            this.value = '';
      }
    };

</script>

梦缘 发表于 2023-6-24 10:33

问好老师，欣赏精彩佳作，点赞！{:4_187:}

红影 发表于 2023-6-24 10:55

这个背景很奇特，好像的把动图片段重复而形成的视频？暂停是按动图方式停止在第一幅图。
很喜欢的歌曲，制作漂亮。欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2023-6-24 11:24

梦缘 发表于 2023-6-24 10:33
问好老师，欣赏精彩佳作，点赞！

老师中午好！

醉美水芙蓉 发表于 2023-6-24 11:28

红影 发表于 2023-6-24 10:55
这个背景很奇特，好像的把动图片段重复而形成的视频？暂停是按动图方式停止在第一幅图。
很喜欢的歌曲，制 ...

红影美女中午好！

岩新新 发表于 2023-6-24 11:38

欣赏点赞！

醉美水芙蓉 发表于 2023-6-24 12:09

岩新新 发表于 2023-6-24 11:38
欣赏点赞！

岩新老师下午好！

小辣椒 发表于 2023-6-24 16:28

水芙蓉这个背景手机欣赏是动图，电脑是视频，效果美美的{:4_199:}

醉美水芙蓉 发表于 2023-6-24 16:32

小辣椒 发表于 2023-6-24 16:28
水芙蓉这个背景手机欣赏是动图，电脑是视频，效果美美的

辣椒美女下午好！

南无月 发表于 2023-6-24 17:29

厉害，字体是立体的，另外进行了设置{:4_187:}

醉美水芙蓉 发表于 2023-6-24 18:01

南无月 发表于 2023-6-24 17:29
厉害，字体是立体的，另外进行了设置

这是跟一个老师学的，最近不知道老师怎么不来了？

红影 发表于 2023-6-24 18:46

醉美水芙蓉 发表于 2023-6-24 11:28
红影美女中午好！

问好水芙蓉美女{:4_187:}

南无月 发表于 2023-6-24 22:02

醉美水芙蓉 发表于 2023-6-24 18:01
这是跟一个老师学的，最近不知道老师怎么不来了？

估计是最近忙吧

查看完整版本: 半壶纱