万水千山总是情
<style>
#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64d074601ddac507cc73e2fc.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/64d074d11ddac507cc74d18b.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/64d05ba71ddac507cc3d6668.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05bc11ddac507cc3d9bcf.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05bda1ddac507cc3dd488.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05bf31ddac507cc3e0a87.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c0c1ddac507cc3e3eb6.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c251ddac507cc3e7316.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c3d1ddac507cc3ea4c1.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c5d1ddac507cc3ee8a6.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c761ddac507cc3f1d96.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05c911ddac507cc3f594d.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05ca91ddac507cc3f973b.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05cc21ddac507cc3fd2f5.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05cda1ddac507cc4009ed.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05cf21ddac507cc40424b.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d05d061ddac507cc406ee2.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=1477531481.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> 红影爱喝水，找一个水多的歌送给你。万水，使劲喝吧。。。。{:5_112:} 好听，好听，我很喜欢听粤语《万水千山总是情》。 谢谢东篱大哥好帖，这个制作漂亮，包括播放器时钟的底色都跟背景是相互映衬的，很赞{:4_199:} 东篱闲人 发表于 2023-8-7 12:47
红影爱喝水，找一个水多的歌送给你。万水，使劲喝吧。。。。
要是能喝下这么多水，我岂不是要修炼成为龙身了{:4_189:} 这些风景真美，谢谢东篱大哥，影子珍藏{:4_199:} 梦油 发表于 2023-8-7 14:53
好听，好听，我很喜欢听粤语《万水千山总是情》。
嗯嗯，谢谢老梦，老梦喜欢啥风格？一会送你一个。。。{:5_117:} 红影 发表于 2023-8-7 15:06
要是能喝下这么多水，我岂不是要修炼成为龙身了
红龙。。。{:5_116:} 越来越棒了呀。 {:4_199:} 一朵梅 发表于 2023-8-7 15:39
越来越棒了呀。
你也是，咱俩一样。。。{:5_117:} 高手在花潮，东篱数第一！ 东篱闲人 发表于 2023-8-7 15:15
嗯嗯，谢谢老梦，老梦喜欢啥风格？一会送你一个。。。
谢谢，谢谢！我想，我们这个年纪的人喜好可能差不多。 亚伦影音工作室 发表于 2023-8-7 16:31
高手在花潮，东篱数第一！
老师啊，有你在，没人敢说第一。。。{:5_117:} 梦油 发表于 2023-8-7 16:31
谢谢，谢谢！我想，我们这个年纪的人喜好可能差不多。
收礼！{:5_108:} 亚伦影音工作室 发表于 2023-8-7 16:31
高手在花潮，东篱数第一！
正好有你这大师来了，你能不能把那个表针帮俺调调，别让它乱晃。。。{:5_103:} 东篱闲人 发表于 2023-8-7 15:15
红龙。。。
嗯嗯，我朝着这个方向努力{:4_173:} 红影 发表于 2023-8-7 16:50
嗯嗯，我朝着这个方向努力
可别变黄龙啊，黄龙爱造反。。。 肿么可以介么美？
情肿么可以介么多？ 马黑黑 发表于 2023-8-7 18:11
肿么可以介么美？
情肿么可以介么多？
喝酒。。。{:4_176:}