把酒话前尘 TO醉美水芙蓉 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 欢乐水吧 › 把酒话前尘 TO醉美水芙蓉

东篱闲人 发表于 2023-8-7 09:43

把酒话前尘 TO醉美水芙蓉

<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64d046721ddac507cc115c27.jpg') center/cover no-repeat; box-shadow:0 0px 0px 3px #800000; position: relative; z-index: 1; --state: running; overflow:hidden;}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left:85%;top:10%; transform: translate(-50%, 10px);font:normal 1.5em/ 40px 华文隶书; color:#0000;filter:hue-rotate(360deg)contrast(120%)brightness(200%)drop-shadow( 0px 2px 0px #ffffff); z-index: 2; writing-mode: vertical-rl;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#E00000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);writing-mode: vertical-rl; }
@keyframes cover1{0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }
@keyframes cover2 {0% { width: 100%;letter-spacing: 10px; height: 0; }100% { width: 100%; height: 300%;letter-spacing: 0px;color:#000080; } }

#clock {z-index: 20;
   margin: 40% 5%;
   width: 280px;
   height: 150px;
      color: #eeeeee;
   border-radius: 0px 150px 0px 150px;
   display: grid;background: url('https://pic.imgdb.cn/item/64cce8621ddac507ccf1b726.jpg') center/cover no-repeat;
box-shadow:0 0px 0px 2px #ffffff;

   place-items: center;
   position: relative;
   cursor: pointer;
   opacity: 1;
   --state: paused;
}
#clock::before, #clock::after {
   position: absolute;
   content: '';
   width: 3px;
   height: 68px;
}
#clock::after {
   --deg: 360deg;
   bottom: 50%;
   background: #00ff00;
   opacity: 1;
   transform-origin: 50% 100%;
   animation: rot var(--time) infinite linear var(--state);
}
#clock::before {
   --deg: 25deg;
   top: 50%;
   background: #ff0000;
   transform: rotate(-45deg);
   transform-origin: 50% 0;
   animation: rot .3s infinite alternate linear var(--state);
}
#clock > span {
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #eeeeee;
   z-index: 2;
}
#clock > span:nth-of-type(2) {
   top: 0px;
   width: 0px;
   height: 0px;
   background: #cccccc;
}
@keyframes rot {
   to {transform: rotate(var(--deg)); }}

.photo {width: 50%; height: 50%;

position: absolute;z-index: 1;
top:25%; left:30%;filter:contrast(120%)brightness(100%);
opacity: 0;box-shadow:0 0px 0px 2px #ffffff;
animation-name: round ;animation-duration: 180s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1)translate(-50%,-40%);
opacity:1}
5% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,30%);
opacity:1}
8% {
-webkit-transform:rotate(-20deg)scale(1)translate(-50%,30%);
opacity:1}
11% {
-webkit-transform:rotate(20deg)scale(1)translate(50%,-50%);
opacity:1}

15% {
-webkit-transform:rotate(-20deg)scale(0.6)translate(100%,-60%);
opacity:1}
18% {
-webkit-transform:rotate(80deg)scale(0)translate(-600%,450%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:3%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="testImg"><img alt="" class="photo" src="https://pic.imgdb.cn/item/64d0399f1ddac507ccfa669a.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d039ba1ddac507ccfa8fe6.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d039d71ddac507ccfab956.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d039fb1ddac507ccfaf25f.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03a161ddac507ccfb1d46.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03a351ddac507ccfb50d0.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03a591ddac507ccfb8930.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03a771ddac507ccfbc124.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03a911ddac507ccfbec93.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03aab1ddac507ccfc17e3.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03ac91ddac507ccfc4828.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03ae31ddac507ccfc7455.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03b031ddac507ccfca36e.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03b1f1ddac507ccfcd250.jpg">

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d03bfe1ddac507ccfe2b7c.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00     00:00<span></span><span></span></div>
<div id="lrc" data-lrc="代码编辑：醉美水芙蓉">代码编辑：醉美水芙蓉</div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=378740.mp3" loop="" autoplay=""></audio>

<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;};
clock.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => clock.style.setProperty('--state','running'));
aud.addEventListener('pause', () => clock.style.setProperty('--state','paused'));
aud.addEventListener('canplay', () => clock.style.setProperty('--time',aud.duration + 's'));
aud.addEventListener('timeupdate', () => clock.innerHTML = toMin(aud.currentTime) + '     ' +toMin(aud.duration) + '<span></span><span></span>');
let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
            fs = !fs;
   };
</script>

<script>
(function() {
   let mKey = 0, mFlag = true;
   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;};
   let averAdd = 0, offset = 0;
   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 geci = `编辑配图：东篱闲人
冷冷夜风吹来昨日的面容
挥一挥手无影无踪
多少前世缘只为了今生一相逢
换一次明月清风与共
回首萧瑟中二十余年尘与梦
人生何似恰若飞鸿
昨日黄梁梦今朝已黄土一杯酒
不过是烟尘无不同
遥想当年多少的痴狂少年梦
往事种种伤心潮涌
把酒话前尘看岁月飞纵
浪花淘尽多少好汉英雄
辗转红尘中为一知己能相逢
对月高歌醉舞清风
管他人间事你我又何需太匆匆
今宵酒醒任南北西东
回首萧瑟中二十余年尘与梦
人生何似恰若飞鸿
昨日黄梁梦今朝已黄土一杯酒
不过是烟尘无不同
遥想当年多少的痴狂少年梦
往事种种伤心潮涌
把酒话前尘看岁月飞纵
浪花淘尽多少好汉英雄
辗转红尘中为一知己能相逢
对月高歌醉舞清风
管他人间事你我又何需太匆匆
今宵酒醒任南北西东
多少事尽付笑谈中
多少事尽付笑谈中

`;
   let lrcAr = getLrcAr(geci);
   let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
   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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('pause', () => mState());
   aud.addEventListener('play', () => mState());
   aud.addEventListener('seeked', () => calcKey());
   aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
   mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
var image = document.getElementById("testImg"),
button = document.getElementById("clock");

if (image.classList && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}
</script>

东篱闲人 发表于 2023-8-7 09:43

这是利用你修改后的代码做的第一贴，送给你。。。{:4_204:}

红影发表于 2023-8-7 10:14

东篱大哥厉害。制作真漂亮。水芙蓉美女收礼开心{:4_187:}

红影发表于 2023-8-7 10:15

把酒话东篱多好，话什么前尘啊{:4_173:}

东篱闲人 发表于 2023-8-7 10:26

红影发表于 2023-8-7 10:15
把酒话东篱多好，话什么前尘啊

前尘就是没事总想没用的。。。{:4_189:}

醉美水芙蓉 发表于 2023-8-7 11:57

醉美水芙蓉 发表于 2023-8-7 11:58

东篱闲人 发表于 2023-8-7 12:44

醉美水芙蓉发表于 2023-8-7 11:57
感谢东篱老师的美贴！老师辛苦了！

芙蓉辛苦，喝水。。。{:4_180:}

东篱闲人 发表于 2023-8-7 12:45

醉美水芙蓉发表于 2023-8-7 11:58
老师做得漂亮，我赶紧收藏起来！

感谢你修改的代码，简洁多了。。。{:5_112:}

红影发表于 2023-8-7 16:12

东篱闲人发表于 2023-8-7 10:26
前尘就是没事总想没用的。。。

也不错，喝酒的时候天南海北，聊什么都不错{:4_173:}

东篱闲人 发表于 2023-8-7 16:32

红影发表于 2023-8-7 16:12
也不错，喝酒的时候天南海北，聊什么都不错

嗯嗯，云山雾照的。。。{:4_170:}

红影发表于 2023-8-7 21:40

东篱闲人发表于 2023-8-7 16:32
嗯嗯，云山雾照的。。。

第二天酒醒了什么都记不住{:4_173:}

小辣椒 发表于 2023-8-7 21:52

哇塞~~老头一做就三个，技术非常巩固了，老头是我们的学习榜样{:4_178:}

小辣椒 发表于 2023-8-7 21:52

醉美水芙蓉发表于 2023-8-7 11:58
老师做得漂亮，我赶紧收藏起来！

水芙蓉收礼开心{:4_171:}

醉美水芙蓉 发表于 2023-8-7 22:13

东篱闲人 发表于 2023-8-7 22:50

红影发表于 2023-8-7 21:40
第二天酒醒了什么都记不住

俺不知道，这个你有生活。。。{:5_116:}

东篱闲人 发表于 2023-8-7 22:51

小辣椒发表于 2023-8-7 21:52
哇塞~~老头一做就三个，技术非常巩固了，老头是我们的学习榜样

今天那这一个消费了。。。{:5_117:}

东篱闲人 发表于 2023-8-7 22:51

醉美水芙蓉发表于 2023-8-7 22:13
小辣椒说得不错！

芙蓉丫头没喝晕吧？{:5_117:}

小辣椒 发表于 2023-8-10 13:02

东篱闲人发表于 2023-8-7 22:51
今天那这一个消费了。。。

消费了什么意思？

小辣椒 发表于 2023-8-10 13:03

醉美水芙蓉发表于 2023-8-7 22:13
小辣椒说得不错！

是吧，老头最认真的，三好学生{:4_173:}

页: [1]

查看完整版本: 把酒话前尘 TO醉美水芙蓉