源码小屋

凡哥 · 发表于 2024-6-5 12:29

本帖最后由凡哥于 2024-6-5 12:31 编辑

2024年6月5日 2024年6月5日星期三

戴树红·碧涧流泉

<style>

#mydiv { margin: 30px 0 30px calc(50% - 602px); width: 1024px; height:680px; background: url('https://638183.freep.cn/638183/t24/2/bjlq.jpeg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }

txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 10px; width: 50px; height: 50px; font: normal 30px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }

txt-box::after { position: absolute; content: ''; inset: -4px; border: thick outset lightgreen; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }

txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }

#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; opacity: .75; pointer-events: none; }

@keyframes move { to { bottom: 150px; } }

@keyframes rot { to { transform: rotateX(360deg); } }

</style>

</div>

(function() {

const ar = '涧水流花去山云载鹤归'.split('');

const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;

let tbAr = [];

ar.forEach((t,k) => {

let tbox = document.createElement('txt-box');

tbox.textContent = t;

tbox.style.cssText += `

--xx: ${ww / total * k + 180}px;

--delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;

`;

tbAr.push(tbox);

mydiv.appendChild(tbox);

});

aud.onplaying = aud.onpause = () => {

mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);

aud.paused ? vid.pause() : vid.play();

tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);

};

tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());

})();

</script>

凡哥 · 发表于 2024-6-7 18:24

2024年6月7日星期五

斯兰·天女散花

<style>

#mydiv { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height:900px; background: url('https://638183.freep.cn/638183/t24/2/tnsh.jpg') no-repeat 0/cover; border: thick inset tan; overflow: hidden; transition: 1s; z-index: 1; user-select: none; position: relative; }

.vid { position: absolute; object-fit: cover; }

.vid:nth-of-type(1) { bottom: 0; width: 100%; height: calc(100% + 0px); transform: rotateX(180deg) rotateY(180deg); mix-blend-mode: darken; }

.vid:nth-of-type(2) { top: 255px; left: 820px; width: 100px; height: 100px; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 0 50px snow); transform-origin: 50% 100%; transition: 2s; }

.vid:nth-of-type(2):hover { transform: scale(1.5); }

</style>

</div>

(function() {

const sFile = document.createElement('script');

sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';

sFile.charset = 'utf-8';

document.head.appendChild(sFile);

sFile.onload = () => {

LRC({

papa: '#mydiv',

lrcAr: lrcAr,

btn: '#vbtn',

lrc_css: 'left: 50%; top: 20px; transform: translate(-50%); color: rgba(255,255,255,.5); --bg: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6))',

});

};

mydiv.oncontextmenu = (e) => e.preventDefault();

const lrcAr = [[2,"斯兰·天女散花", 10], [27.05,"鲜花开放满天庭满天庭",20], [46.08,"万紫千红万紫千红别有春",11.8], [58.01,"采得鲜花下人世",6.6], [65.01,"好分春色到凡尘",8.2], [80.08,"国色天香世无伦",7.2], [89.03,"百媚千娇画不成",8.1], [98.01,"天上鲜花谁爱护",6.6], [105.03,"不如来散给有情人",3.0], [108.06,"不如来散来散来散",5.5], [114.02,"来散来散来散",2.9], [117.01,"来散给有情人",8.2], [141.06,"鲜花开放满天庭满天庭",20], [164,"万紫千红万紫千红别有春",8.7], [173,"采得鲜花下人世",6.7], [180.05,"好分春色到凡尘",8.1], [195.08,"国色天香世无伦",7.2], [204.03,"百媚千娇画不成",8.6], [213.01,"天上鲜花谁爱护",6.4], [220.05,"不如来散给有情人",3.0], [223.06,"不如来散来散来散",6.0], [229.03,"来散来散来散",3.0], [232.01,"来散给有情人",8.8]];

})();

</script>

花简静 · 发表于 2024-6-7 20:53

我来点个卯

凡哥 · 发表于 2024-6-7 22:50

花简静发表于 2024-6-7 20:53
我来点个卯

糊涂仙儿 · 发表于 2024-6-8 09:00

都这么漂亮

凡哥 · 发表于 2024-6-8 11:39

糊涂仙儿发表于 2024-6-8 09:00
都这么漂亮

蟹蟹支持

凡哥 · 发表于 2024-6-8 11:48

2024年6月8日星期六

大河悠久

<style>

#tz { margin: 30px 0 30px calc(50% - 602px); width: 1024px; height: 640px; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; }

#tz::before { position: absolute; content: ''; width: var(--size); height: var(--size); background: linear-gradient(cyan, olive, orange, navy); animation: spin 12s linear infinite var(--state); }

#nr { position: absolute; padding: 10px; background: url('https://638183.freep.cn/638183/t24/2/dahe.jpg') no-repeat center/cover; inset: 6px; }

txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 0; width: 50px; height: 50px; font: normal 30px sans-serif; color: white; transition: .5s; cursor: pointer; animation: move 5s var(--delay) linear infinite alternate var(--state); }

txt-box::after { position: absolute; content: ''; inset: -6px; border: thick groove olive; border-radius: 50%; box-shadow: inset 0 0 30px lightblue; transform: perspective(1000px) rotateY(-60deg) rotateZ(0); animation: rot 5s var(--delay) linear infinite alternate var(--state); }

txt-box:hover { filter: hue-rotate(60deg) drop-shadow(0 -10px 30px white); }

#vid { position: absolute; left: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: darken; pointer-events: none; }

#bird { position: absolute; left: 1024px; top: -70px; mix-blend-mode: multiply; animation: fly linear 6s infinite var(--state); }

@keyframes move { to { bottom: 150px; } }

@keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fly { to { left: -400px; } }

</style>

</div>

(function() {

tz.style.setProperty('--size', Math.ceil(Math.sqrt(tz.offsetWidth ** 2 + tz.offsetHeight ** 2)) + 'px');

const ar = nr.dataset.tt.split('');

const total = ar.length, half = Math.floor(ar.length / 2);

let tbAr = [];

ar.forEach((t,k) => {

let tbox = document.createElement('txt-box');

tbox.textContent = t;

tbox.style.cssText += `

--xx: ${100 * k + 50}px;

--delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;

`;

tbAr.push(tbox);

nr.appendChild(tbox);

});

aud.onplaying = aud.onpause = () => {

tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

aud.paused ? vid.pause() : vid.play();

tbAr.forEach(item => item.title = ['暂停','播放'][+aud.paused]);

};

tbAr.forEach(item => item.onclick = () => aud.paused ? aud.play() : aud.pause());

})();

</script>

凡哥 · 发表于 2024-6-10 15:45

糊涂仙儿发表于 2024-6-8 09:00
都这么漂亮

人长的俊木有办法

凡哥 · 发表于 2024-6-10 15:49

2024年6月10日星期一

祝端午安康

<style>

#tz { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/55.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }

#lrc { position: absolute; left: 20px; top: 20px; font: normal 40px sans-serif; white-space: nowrap; color: darkgreen; text-shadow: 1px 1px 1px gray; animation: fly 20s linear infinite alternate var(--state); --ww: 350px; }

#player { position: absolute; left: calc(50% - 140px); bottom: 20px; width: 280px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: green; --prg: 0%; --btnSize: 50px;}

#player::before, #player::after { position: absolute; content: ''; }

#player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 5px); background: url('https://638183.freep.cn/638183/t23/btn/f5.png') no-repeat center/cover; filter: hue-rotate(180deg); animation: rot 6s linear infinite var(--state);}

#player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }

.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }

@keyframes rot { to { transform: rotate(360deg); } }

@keyframes fly { to { left: calc(100% - var(--ww) - 20px); } }

</style>

<div id="lrc">HUACHAO PLAYER</div>

</div>

var vids = document.querySelectorAll('.vid');

var btnSize = parseInt(window.getComputedStyle(player).getPropertyValue('--btnSize'));

var lrcKey = 0;

var showLrc = () => {

if(lrcKey >= lrcAr.length) return false;

lrc.innerText = lrcAr[lrcKey][1];

lrc.style.setProperty('--ww', lrc.offsetWidth + 'px');

lrcKey ++;

};

var mState = () => {

tz.style.setProperty('--state',['running','paused'][+aud.paused]);

if(vids.length > 0) vids.forEach(vid => aud.paused ? vid.pause() : vid.play());

};

var s2m = (s) => (Math.floor(s / 60)).toString().padStart(2, '0') + ':' + (Math.floor(s % 60)).toString().padStart(2, '0');

aud.onplaying = aud.onpause = () => mState();

aud.onseeked = () => {

for(var j = 0; j < lrcAr.length; j ++) {

if(aud.currentTime < lrcAr[j][0]) {

lrcKey = j - 1;

if(lrcKey < 0) lrcKey = 0;

break;

}

};

aud.ontimeupdate = () => {

player.style.setProperty('--prg', (aud.currentTime / aud.duration * 100 || 0) + '%');

player.dataset.time = s2m(aud.currentTime) + ' ' + s2m(aud.duration);

if(lrcKey <= lrcAr.length - 1 && aud.currentTime >= lrcAr[lrcKey][0]) showLrc();

}

player.onclick = (e) => {

if(e.offsetY > 0) aud.currentTime = aud.duration * e.offsetX / player.offsetWidth;

if(e.offsetY < 0 && e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) aud.paused ? aud.play() : aud.pause();

}

player.onmousemove = (e) => {

if(e.offsetY < 0) {

if(e.offsetX > player.offsetWidth / 2 - btnSize / 2 && e.offsetX < player.offsetWidth / 2 + btnSize / 2) {

player.title = aud.paused ? '播放' : '暂停';

player.style.cursor = 'pointer';

}

}else{

player.title = '调节进度';

player.style.cursor = 'pointer';

}

};

var lrcAr = [ [2,"余静 - 五月初五端午节", 4], [8.68,"词曲：张博伦",1.7], [10.39,"演唱：余静",5.3], [15.67,"五月初五端午节",4.9], [20.54,"佩香囊挂艾叶",3.5], [24.06,"糯米粽子多吃些",3.9], [27.93,"龙舟嘛争前列",3.7], [31.67,"五月初五端午节",3.2], [34.91,"爱国心楚辞写",4.3], [39.23,"汨罗江边唤屈原",3.9], [43.14,"纪念他忠贞烈",18.9], [62.02,"五月初五端午节",4.0], [65.98,"佩香囊挂艾叶",4.0], [70.01,"糯米粽子多吃些",3.9], [73.88,"龙舟嘛争前列",3.7], [77.61,"五月初五端午节",4.3], [81.9,"爱国心楚辞写",3.2], [85.08,"汨罗江边唤屈原",4.4], [89.52,"纪念他忠贞烈",6]];

</script>

糊涂仙儿 · 发表于 2024-6-10 16:06

凡哥发表于 2024-6-10 15:45
人长的俊木有办法

说太对了。端午安康

[碎语] 源码小屋

2024年6月5日 2024年6月5日 星期三

戴树红·碧涧流泉

评分

2024年6月7日 星期五

斯兰·天女散花

评分

2024年6月8日 星期六

大河悠久

2024年6月10日 星期一

祝端午安康

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

樱果相依

喜上莓梢

一坛酒

一叶知秋

版主勋章

山高为峰

山外有山

24

46

47

48

闲花落

海洋之心

蝴蝶精灵

花漫千山

江湖之上

音画同行

中秋月圆

欢度国庆

雪花精灵

开卷有益

桃花朵朵

彩凤凰

2024年6月5日 2024年6月5日星期三

2024年6月7日星期五

2024年6月8日星期六

2024年6月10日星期一