茶禅一味

东篱闲人 发表于 2023-8-4 20:12

本帖最后由东篱闲人于 2023-8-4 20:22 编辑 <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/64cced6c1ddac507ccfdb0ec.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%;
clip-path: polygon(100.00% 50.00%, 98.18% 50.19%, 93.01% 51.48%, 85.37% 54.68%, 76.48% 60.15%, 67.68% 67.68%, 60.15% 76.48%, 54.68% 85.37%, 51.48% 93.01%, 50.19% 98.18%, 50.00% 100.00%, 49.81% 98.18%, 48.52% 93.01%, 45.32% 85.37%, 39.85% 76.48%, 32.32% 67.68%, 23.52% 60.15%, 14.63% 54.68%, 6.99% 51.48%, 1.82% 50.19%, 0.00% 50.00%, 1.82% 49.81%, 6.99% 48.52%, 14.63% 45.32%, 23.52% 39.85%, 32.32% 32.32%, 39.85% 23.52%, 45.32% 14.63%, 48.52% 6.99%, 49.81% 1.82%, 50.00% 0.00%, 50.19% 1.82%, 51.48% 6.99%, 54.68% 14.63%, 60.15% 23.52%, 67.68% 32.32%, 76.48% 39.85%, 85.37% 45.32%, 93.01% 48.52%, 98.18% 49.81%, 100.00% 50.00%);
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/64ccd5ad1ddac507ccc9ad32.jpg">

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

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

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

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

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

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

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

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

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

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

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

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

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

<img alt="" class="photo" src="https://pic.imgdb.cn/item/64ccd9281ddac507ccd0d7d8.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=465920323.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>

</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-4 20:48

东篱大哥厉害，这么快就做出来了。整体画面很雅致，点赞{:4_199:}

东篱闲人 发表于 2023-8-4 21:06

红影发表于 2023-8-4 20:48
东篱大哥厉害，这么快就做出来了。整体画面很雅致，点赞

整个代码就开套。。。{:5_117:}

醉美水芙蓉 发表于 2023-8-4 21:41

东篱闲人 发表于 2023-8-4 21:57

醉美水芙蓉发表于 2023-8-4 21:41
东篱老师速度呀！漂亮！

现学现卖。。。{:5_117:}

红影发表于 2023-8-4 22:02

东篱闲人发表于 2023-8-4 21:06
整个代码就开套。。。

设计很漂亮，很赞{:4_199:}

东篱闲人 发表于 2023-8-4 22:05

红影发表于 2023-8-4 22:02
设计很漂亮，很赞

谢谢，喝水。。。{:4_180:}

红影发表于 2023-8-4 22:15

东篱闲人发表于 2023-8-4 22:05
谢谢，喝水。。。

到时间了，东篱大哥也喝{:4_180:}

马黑黑 发表于 2023-8-4 23:00

{:4_199:}

梦油发表于 2023-8-5 11:22

设计优雅，赞！

小辣椒 发表于 2023-8-5 13:44

老头学习也是快的，过目不忘{:4_173:}

东篱闲人 发表于 2023-8-6 09:20

马黑黑发表于 2023-8-4 23:00

{:4_176:}

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

梦油发表于 2023-8-5 11:22
设计优雅，赞！

{:4_176:}

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

小辣椒发表于 2023-8-5 13:44
老头学习也是快的，过目不忘

还过目不忘呢？一会就忘。。。{:5_117:}

马黑黑 发表于 2023-8-6 09:43

东篱闲人发表于 2023-8-6 09:20

周末多喝

梦油发表于 2023-8-6 11:23

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

为我们的友谊干杯！{:4_191:}

东篱闲人 发表于 2023-8-6 13:05

马黑黑发表于 2023-8-6 09:43
周末多喝

好的。。。{:4_180:}

东篱闲人 发表于 2023-8-6 13:05

梦油发表于 2023-8-6 11:23
为我们的友谊干杯！

{:4_176:}

小辣椒 发表于 2023-8-6 20:22

东篱闲人发表于 2023-8-6 09:21
还过目不忘呢？一会就忘。。。

老头一直感觉吧记性很好，学习东西很快的

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

小辣椒发表于 2023-8-6 20:22
老头一直感觉吧记性很好，学习东西很快的

还不是师傅教的好。。。{:5_112:}

页: [1]

花潮论坛's Archiver

茶禅一味