老树春深更著花 TO老梦
本帖最后由 东篱闲人 于 2023-8-7 16:59 编辑 <br /><br /><style>#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64d0a8eb1ddac507ccf69690.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/64d0a9a11ddac507ccf849ba.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/64d09e4c1ddac507ccdbaa88.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09e691ddac507ccdbf3c1.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09e851ddac507ccdc400d.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09ea11ddac507ccdc9075.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09ebe1ddac507ccdcdd82.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09ef01ddac507ccdd5df5.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f091ddac507ccdda2cb.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f231ddac507ccdde13e.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f3c1ddac507ccde1e28.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f651ddac507ccde7c73.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f801ddac507ccdeb823.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09f9d1ddac507ccdefd61.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09fb71ddac507ccdf3ab4.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09fd01ddac507ccdf7778.jpg">
<img alt="" class="photo" src="https://pic.imgdb.cn/item/64d09fe91ddac507ccdfae70.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=507160391.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> 呀，这个是给梦油的，梦油快来收礼@梦油{:4_187:} 东篱大哥也太厉害了，连着做了这么多，而且都那么漂亮{:4_199:} 红影 发表于 2023-8-7 16:40
呀，这个是给梦油的，梦油快来收礼@梦油
腿脚真快。。。{:5_117:} 红影 发表于 2023-8-7 16:41
东篱大哥也太厉害了，连着做了这么多，而且都那么漂亮
这个不算麻烦，主要是选图。只做个背景就好。。。 我为东篱朋友的高超技艺感到惊赏。谢谢你，东篱闲人朋友。{:5_108:} 红影 发表于 2023-8-7 16:40
呀，这个是给梦油的，梦油快来收礼@梦油
来啦，来啦。谢谢东篱闲人朋友！谢谢影子朋友！ 梦油 发表于 2023-8-7 16:55
我为东篱朋友的高超技艺感到惊赏。谢谢你，东篱闲人朋友。
老朋友，不客气。。。{:4_190:} 层层叠叠，漂亮～ 一朵梅 发表于 2023-8-7 17:51
层层叠叠，漂亮～
喝水。。。。{:4_180:} 东篱闲人 发表于 2023-8-7 16:57
老朋友，不客气。。。
是的，老朋友啊，也就不客气啦。 梦油 发表于 2023-8-7 19:10
是的，老朋友啊，也就不客气啦。
{:4_181:} 老头太佩服你了，速度的，我做个帖得花许多时间，你是秒做，一天几个{:4_199:} 音乐也是配的好{:4_199:} 梦油收礼开心@梦油 {:4_187:} 太美啦。 @梦油 先生收礼开心 东篱闲人 发表于 2023-8-7 16:44
腿脚真快。。。
东篱大哥的帖子都漂亮，有美帖可看，当然跑的快了{:4_173:} 东篱闲人 发表于 2023-8-7 16:45
这个不算麻烦，主要是选图。只做个背景就好。。。
这个背景做起来也花时间的，你的速度和质量都是顶呱呱的{:4_187:} 醉美水芙蓉 发表于 2023-8-7 19:45
老师选得景色漂亮！
觉得这几个好看。。。。