源码小屋

花简静 · 发表于 2024-5-25 21:22

凡哥发表于 2024-5-25 21:07
随意的，不一定是精致的

看代码就知道思维习惯。。。
由思维习惯推及生活习惯。。
小屋有序且精致舒适

凡哥 · 发表于 2024-5-25 22:26

花简静发表于 2024-5-25 21:22
看代码就知道思维习惯。。。
由思维习惯推及生活习惯。。
小屋有序且精致舒适 ...

这是错误推导

凡哥 · 发表于 2024-5-25 22:32

菜菜发表于 2024-5-25 21:13
我咋看不到

看不到代码么

凡哥 · 发表于 2024-5-26 09:46

2024年5月26日星期日

《守护者》代码

<style>

#papa { margin: 20px 0 20px calc(50% - 602px); position: relative; width: 1024px; height: 576px; background: tan url('https://638183.freep.cn/638183/t24/2/guardian.jpg'); box-shadow: 2px 2px 6px #000; user-select: none; z-index: 1; }

.player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); }

.player:nth-of-type(1) { left: 535px; top: 300px; --deg: 1turn; }

.player:nth-of-type(2) { left: 600px; top: 470px; --deg: -1turn; }

.player:nth-of-type(3) { left: 700px; top: 150px; --deg: 1turn; }

.player:nth-of-type(4) { left: 925px; top: 250px; --deg: -1turn; }

.player:nth-of-type(5) { left: 300px; top: 50px; --deg: 1turn; }

.player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #000); --state: paused; }

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

</style>

</div>

var players = document.querySelectorAll('.player');

var mState = () => {

papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

players.forEach(player => player.title = aud.paused ? '播放' : '暂停');

};

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

players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());

</script>

花简静 · 发表于 2024-5-26 15:47

凡哥发表于 2024-5-25 22:26
这是错误推导

常规推导都是错误推导

凡哥 · 发表于 2024-5-26 18:03

花简静发表于 2024-5-26 15:47
常规推导都是错误推导

这肿么可能

凡哥 · 发表于 2024-5-27 21:00

2024年5月27日星期一

《虞兮叹》代码

<style>

.papa { margin: 20px 0 20px calc(50% - 730px); width: 1280px; height: 700px; background: url('https://638183.freep.cn/638183/t24/2/yuxi.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }

#aCanv { position: absolute; bottom: 10px; left: calc(50% - 300px); }

.vid { position: absolute; top: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; transform: rotateX(180deg); mix-blend-mode: screen; }

.mpic { position: absolute; offset-path: path('M0 200 Q640 20,1280 200'); transform: rotateY(180deg); mix-blend-mode: multiply; offset-distance: 0; animation: fly 8s linear infinite var(--state); }

@keyframes fly { to { offset-distance: 100%; } }

</style>

</div>

var sF = document.createElement('script');

sF.charset = 'utf-8';

sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';

document.body.appendChild(sF);

//播放器颜色设置

//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };

//歌词

var lrcAr = [

[2,"闻人听書_虞兮叹",'3'],

[29.08,"楚河流沙几聚散日月沧桑尽变换",5.9],

[35.01,"乱世多少红颜换一声长叹",5.0],

[40.04,"谁曾巨鹿踏破了秦关千里兵戈血染",6.0],

[46.05,"终究也不过是风轻云淡",5.0],

[51.05,"长枪策马平天下此番诀别却为难",6.0],

[57.07,"一声虞兮虞兮泪眼已潸然",5.9],

[63.01,"与君共饮这杯中冷暖西风彻夜回忆吹不断",6.0],

[69.04,"醉里挑灯看剑妾舞阑珊",5.0],

[74.09,"垓下一曲离乱楚歌声四方",5.9],

[80.03,"含悲辞君饮剑血落凝寒霜",5.1],

[85.09,"难舍一段过往缘尽又何妨",6.0],

[91.08,"与你魂归之处便是苍茫",29.0],

[120.03,"长枪策马平天下此番诀别却为难",6.0],

[126.02,"一声虞兮虞兮泪眼已潸然",5.0],

[131.07,"与君共饮这杯中冷暖西风彻夜回忆吹不断",6.9],

[138,"醉里挑灯看剑妾舞阑珊",5.0],

[143.03,"垓下一曲离乱楚歌声四方",5.0],

[148.07,"含悲辞君饮剑血落凝寒霜",6.0],

[154.07,"难舍一段过往缘尽又何妨",5.9],

[160.01,"与你魂归之处便是苍茫",6.0],

[166.04,"汉兵刀剑纷乱折断了月光",5.0],

[171.06,"江畔只身孤舟余生不思量",6.0],

[177.04,"难舍一段过往缘尽又何妨",6.0],

[183,"与你来生共寄山高水长",6]

];

</script>

凡哥 · 发表于 2024-5-27 21:02

本帖最后由凡哥于 2024-5-27 21:04 编辑

配色：

var colors = {
track: 'snow', //底轨颜色
prog: 'purple', //进度指示颜色
btn: 'white', //按钮颜色
text: 'silver' //时间显示颜色
};

配色代码可以写成一行：

var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };

凡哥 · 发表于 2024-5-28 17:57

2024年5月28日星期二

《雪山》

<style>

#papa { margin: 20px 0 20px calc(50% - 730px) ; width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/2/snowmountain.jpg') no-repeat center/cover; box-shadow: 2px 2px 5px #333; overflow: hidden; z-index: 1; position: relative; }

.mama { position: absolute; left: 300px; top: 20px; width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }

.mama:nth-of-type(2) { left: 400px; }

e-son { position: absolute; left: calc(50% - 15px); top: 18px; width: 30px; height: 80px; border-radius: 100% 0; border: 1px solid gray; transform-origin: 50% 100%; transform: rotate(var(--deg)) translateY(-10px); background: hsla(var(--bg), 100%, 50%, .8); }

#vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; }

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

</style>

</div>

(function() {

Array.from({length: 6}).forEach((e,k) => {

e = document.createElement('e-son');

e.style.cssText += `--deg: ${60 * k}deg; --bg: ${Math.round(Math.random() * 360)};`;

ma.appendChild(e);

});

var node = document.getElementById('ma');

var clone = node.cloneNode(true);

clone.id = 'ma1';

clone.onclick = () => ma.click();

clone.style.cssText += 'left: 800px; top: 160px; filter: hue-rotate(200deg);';

papa.appendChild(clone);

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

papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

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

};

ma.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>

凡哥 · 发表于 2024-5-28 17:59

《雪山》的播放器：

采用“克隆”方式生成第二组播放器HTML组件，代码在23~28行。

[碎语] 源码小屋

2024年5月26日星期日

评分

2024年5月27日星期一

《虞兮叹》代码

评分

2024年5月28日星期二

《雪山》

评分

一叶知秋

版主勋章

山高为峰

山外有山

樱果相依

24

46

47

48

闲花落

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

喜上莓梢

一坛酒

[碎语] 源码小屋

2024年5月26日 星期日

评分

2024年5月27日 星期一

《虞兮叹》代码

评分

2024年5月28日 星期二

《雪山》

评分

一叶知秋

版主勋章

山高为峰

山外有山

樱果相依

24

46

47

48

闲花落

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

喜上莓梢

一坛酒

2024年5月26日星期日

2024年5月27日星期一

2024年5月28日星期二