源码小屋

凡哥 · 发表于 2024-7-2 12:10

2024年7月2日星期二

西亚风光

<style>

#papa { --width: 1024px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px)); width: var(--width); height: 683px; background: url('https://638183.freep.cn/638183/t24/3/xyfg.jpg') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }

#player { position: absolute; left: calc(50% - 50px); bottom: 100px; width: 100px; height: 100px; background: linear-gradient(green,lightgreen) repeat-y center/5% 5%, linear-gradient(to right,green,lightgreen) repeat-x center/5% 5%; border: thick double; border-color: green lightgreen; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }

#player:hover { transform: scale(1.2); filter: drop-shadow(0 50px 0 green); }

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

#player::before { inset: 0; background: inherit; transform: rotate(45deg); }

#player::after { inset: 40px; background: green; border-radius: 50%; }

.vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }

.vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen; }

.vid:nth-of-type(2) { height: 25%; top: 0; mix-blend-mode: multiply; }

#papa:fullscreen .vid:nth-of-type(1) { height: 38%; }

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

</style>

</div>

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

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

sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';

sF.charset = 'utf-8';

document.querySelector('body').appendChild(sF);

sF.onload = () => FS({

papa: '#papa',

css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: green;',

});

var mState = () => {

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

player.title = ['暂停','播放'][+aud.paused];

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

};

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

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

</script>

凡哥 · 发表于 2024-7-2 12:20

花简静发表于 2024-6-30 10:16
胃开心，人就开心

有道理

凡哥 · 发表于 2024-7-4 13:04

2024年7月4日

故梦

<style>

#mydiv { --width: 1280px; margin: 220px 0 30px calc(50% - (var(--width) / 2 + 90px)); width: var(--width); height: 720px; background: radial-gradient(circle at 29% 55%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 4%,transparent 4%, transparent 44%,transparent 44%, transparent 100%),radial-gradient(circle at 85% 89%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 52%,transparent 52%, transparent 100%),radial-gradient(circle at 6% 90%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 53%,transparent 53%, transparent 64%,transparent 64%, transparent 100%),radial-gradient(circle at 35% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 6%,transparent 6%, transparent 98%,transparent 98%, transparent 100%),radial-gradient(circle at 56% 75%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 16%,transparent 16%, transparent 23%,transparent 23%, transparent 100%),radial-gradient(circle at 42% 0%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 3%,transparent 3%, transparent 26%,transparent 26%, transparent 100%),radial-gradient(circle at 29% 28%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 51%,transparent 51%, transparent 75%,transparent 75%, transparent 100%),radial-gradient(circle at 77% 21%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 35%,transparent 35%, transparent 55%,transparent 55%, transparent 100%),radial-gradient(circle at 65% 91%, hsla(329,0%,99%,0.05) 0%, hsla(329,0%,99%,0.05) 46%,transparent 46%, transparent 76%,transparent 76%, transparent 100%),linear-gradient(45deg, rgb(83, 91, 235), rgb(76, 11, 174)); box-shadow: 2px 3px 6px #666; overflow: hidden; z-index: 1; position: relative; }

#player { position: absolute; left: calc(50% - 70px); top: 50px; width: 140px; filter: drop-shadow(0 0 20px white) hue-rotate(0deg); transition: width .75s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }

#player:hover { width: 150px; }

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

#mydiv:fullscreen #vid { height: calc(100% + 100px); }

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

@keyframes hue { to { filter: drop-shadow(0 0 20px white) hue-rotate(360deg); } }

</style>

</div>

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

sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';

sF.charset = 'utf-8';

document.querySelector('body').appendChild(sF);

sF.onload = () => FS({

papa: '#mydiv',

css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',

});

var mState = () => {

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

player.title = ['暂停','播放'][+aud.paused];

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

};

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

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

</script>

花简静 · 发表于 2024-7-4 19:07

凡哥发表于 2024-7-4 13:04
2024年7月4日
故梦

这个代码空前绝后，纯代码画的背景，真是震撼。。

花简静 · 发表于 2024-7-4 19:16

凡哥发表于 2024-7-2 12:20
有道理

花简静 · 发表于 2024-7-4 19:20

凡哥发表于 2024-7-2 12:08

我也有，哈哈。。

花简静 · 发表于 2024-7-4 19:21

凡哥发表于 2024-7-2 12:08
你什么系统呀

Windows 10 企业版 G

好不容易升出来的。

凡哥 · 发表于 2024-7-5 20:04

花简静发表于 2024-7-4 19:21
Windows 10 企业版 G
好不容易升出来的。

系统不是个问题。但是讲真，win11顶呱呱。

凡哥 · 发表于 2024-7-5 20:05

花简静发表于 2024-7-4 19:07
这个代码空前绝后，纯代码画的背景，真是震撼。。

果酱果酱

凡哥 · 发表于 2024-7-5 20:19

2024年7月5日星期五

律动

<style>

#mydiv { --width: 1280px; margin: 230px 0 30px calc(50% - (var(--width) / 2 + 90px)); width: var(--width); height: 720px; background-image: radial-gradient(circle at center center, rgb(143, 39, 176) 0%, rgb(143, 39, 176) 11%,rgb(128, 38, 169) 11%, rgb(128, 38, 169) 13%,rgb(113, 38, 163) 13%, rgb(113, 38, 163) 17%,rgb(98, 37, 156) 17%, rgb(98, 37, 156) 28%,rgb(83, 37, 150) 28%, rgb(83, 37, 150) 40%,rgb(68, 36, 143) 40%, rgb(68, 36, 143) 72%,rgb(53, 36, 137) 72%, rgb(53, 36, 137) 81%,rgb(38, 35, 130) 81%, rgb(38, 35, 130) 100%); box-shadow: 4px 3px 8px #666; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --bgsize: 25%; }

#mydiv::before, #mydiv::after { position: absolute; content: ''; width: 100%; height: 100%; background-image: inherit; background-size: var(--bgsize); opacity: .4; transform: rotate(-45deg); pointer-events: none; animation: chg .25s linear infinite alternate var(--state); }

#mydiv::after { transform: rotate(45deg); animation-delay: -0.125; }

#player { position: absolute; width: 102px; filter: hue-rotate(0deg); transition: width .5s; cursor: pointer; animation: rot 8s linear infinite var(--state), hue 30s linear infinite alternate var(--state); }

#player:hover { width: 120px; }

@keyframes chg { to { --bgsize: 100%; } }

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

@keyframes hue { to { filter: hue-rotate(360deg); } }

</style>

</div>

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

sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';

sF.charset = 'utf-8';

document.querySelector('body').appendChild(sF);

sF.onload = () => FS({

papa: '#mydiv',

css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',

});

var mState = () => {

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

player.title = ['暂停','播放'][+aud.paused];

};

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

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

</script>

[碎语] 源码小屋

2024年7月2日星期二

西亚风光

2024年7月4日

故梦

评分

2024年7月5日星期五

律动

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

樱果相依

喜上莓梢

一坛酒

一叶知秋

版主勋章

山高为峰

山外有山

24

46

47

48

闲花落

[碎语] 源码小屋

2024年7月2日 星期二

西亚风光

2024年7月4日

故梦

评分

2024年7月5日 星期五

律动

一生安柠

青恬时光

幸福莓满

心想事橙

桃气满满

梅开颜笑

心若葡提

大吉大荔

樱果相依

喜上莓梢

一坛酒

一叶知秋

版主勋章

山高为峰

山外有山

24

46

47

48

闲花落

2024年7月2日星期二

2024年7月5日星期五