论坛 › 欢乐水吧 › 倩影流年

东篱闲人 发表于 2023-8-6 21:55

倩影流年

本帖最后由 东篱闲人 于 2023-8-6 22:35 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tbody><tr><td class="t_f" id="postmessage_1940384"><br><br><style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64cfafa81ddac507cc1c5ec5.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/64cf9a701ddac507ccd1e783.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/64cf9aee1ddac507ccd3daff.jpg">

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

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

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

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

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

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

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

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

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

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

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

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

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

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64cf9b641ddac507ccd591fe.jpg">
</div>
<div id="clock" style="--time:NaNs;">00:00 &nbsp; &nbsp; 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=488647063.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) + ' &nbsp; &nbsp; ' +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>

</td></tr></tbody></table>


</div>
<div id="comment_1940384" class="cm">
</div>

<h3 class="psth xs1"><span class="icon_ring vm"></span><br></h3>
<dl id="ratelog_1940384" class="rate">
<br></dl>

醉美水芙蓉 发表于 2023-8-6 22:14

红影 发表于 2023-8-6 22:19

东篱大哥太快了，刚看水芙蓉的整理的代码就做出来了。这速度太牛了{:4_199:}

红影 发表于 2023-8-6 22:19

制作好美，给东篱大哥点赞{:4_199:}

东篱闲人 发表于 2023-8-6 22:27

醉美水芙蓉 发表于 2023-8-6 22:14
东篱老师做图速度好快，又快又漂亮！真是绝了！

都是瞎鼓捣，没啥章法。。。{:5_117:}

东篱闲人 发表于 2023-8-6 22:27

红影 发表于 2023-8-6 22:19
东篱大哥太快了，刚看水芙蓉的整理的代码就做出来了。这速度太牛了

喝水，到点了。。。。{:4_180:}

亚伦影音工作室 发表于 2023-8-6 22:29

里面的动画可根据个人喜好改编！

东篱闲人 发表于 2023-8-6 22:37

亚伦影音工作室 发表于 2023-8-6 22:29
里面的动画可根据个人喜好改编！

老啦，笨了，俺得慢慢学习。。。{:5_109:}

红影 发表于 2023-8-6 22:55

东篱闲人 发表于 2023-8-6 22:27
喝水，到点了。。。。

一起喝，别客气{:4_180:}

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

红影 发表于 2023-8-6 22:55
一起喝，别客气

不喝。

红影 发表于 2023-8-7 11:08

东篱闲人 发表于 2023-8-7 09:40
不喝。

多研究一会代码有可能渴的呀，先喝了可以防止渴{:4_173:}

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

红影 发表于 2023-8-7 11:08
多研究一会代码有可能渴的呀，先喝了可以防止渴

渴了再说。。。{:5_158:}

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

东篱闲人 发表于 2023-8-7 12:43
渴了再说。。。

被东篱大哥带得没事研究起喝水来了{:4_173:}

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

红影 发表于 2023-8-7 16:49
被东篱大哥带得没事研究起喝水来了

多喝水，绝对有好处。。。{:4_181:}

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

东篱闲人 发表于 2023-8-7 16:51
多喝水，绝对有好处。。。

还得多吃饭才行，否则只混个水饱{:4_173:}

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

红影 发表于 2023-8-7 21:54
还得多吃饭才行，否则只混个水饱

长成大胖子你会哭的。。。。

查看完整版本: 倩影流年