测试东篱音画

显示全部楼层 · 发表于 2023-8-6 20:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由醉美水芙蓉于 2023-8-6 20:22 编辑

全屏观赏

00:00 00:00

代码：亚伦影音工作室

显示全部楼层 · 发表于 2023-8-6 20:22

本帖最后由醉美水芙蓉于 2023-8-6 20:24 编辑

<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%;
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[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar[key][2] = item > aver ? aver : item;});return ar;};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {let lrcAr = [];let calcRule = [60,1,0.001];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[z] * calcRule[z];ar[0] = [parseFloat(sec.toFixed(2)) + offset, geci];lrcAr.push(ar[0]); }}}}lrcAr.sort((a,b)=> a[0] - b[0]);return(lrcTime(lrcAr));}
let geci = `[00:00.00] 作词 : 徐杰作曲 : 路勇
[00:01.00] 编辑、配图：东篱闲人
[00:28.88]月色入壶清凉如水
[00:34.36]焚香煮炉故友相对
[00:39.99]天地辽阔敞开心扉
[00:44.96]悟却禅机收获智慧
[00:51.24]茶香四溢自在入微
[00:57.02]莲花盛开菩提相随
[01:02.74]琴声悠悠举杯同醉
[01:07.58]广结善缘喫茶为媒
[01:16.95]岁月蹉跎融入茶禅一味
[01:22.20]浮浮沉沉阅尽千山万水
[01:28.50]苦涩甘甜都在清茶一杯
[01:33.53]荡涤红尘我们用心体会
[01:39.80]世事沧桑化作茶禅一味
[01:44.82]起起落落上演离合喜悲
[01:51.12]爱恨情仇不过淡茶一杯
[01:56.16]放下所有才懂此中真味
[02:04.41]
[02:17.32]茶香四溢自在入微
[02:22.90]莲花盛开菩提相随
[02:28.68]琴声悠悠举杯同醉
[02:33.51]广结善缘喫茶为媒
[02:42.82]岁月蹉跎融入茶禅一味
[02:47.85]浮浮沉沉阅尽千山万水
[02:54.27]苦涩甘甜都在清茶一杯
[02:59.36]荡涤红尘我们用心体会
[03:05.53]世事沧桑化作茶禅一味
[03:10.61]起起落落上演离合喜悲
[03:17.01]爱恨情仇不过淡茶一杯
[03:22.04]放下所有才懂此中真味
[03:29.64]
[03:31.63]岁月蹉跎融入茶禅一味
[03:36.66]浮浮沉沉阅尽千山万水
[03:43.09]苦涩甘甜都在清茶一杯
[03:48.31]荡涤红尘我们用心体会
[03:54.46]世事沧桑化作茶禅一味
[04:00.14]起起落落上演离合喜悲
[04:05.81]爱恨情仇不过淡茶一杯
[04:10.84]放下所有才懂此中真味
[04:17.68]放下所有才懂此中真味
[04:28.15]
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].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[j][0]) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);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[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);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>