论坛 › 欢乐水吧 › 未闻花名

马黑黑 发表于 2023-4-15 21:10

未闻花名

本帖最后由 马黑黑 于 2023-4-15 21:13 编辑 <br /><br /><style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: green url('https://638183.freep.cn/638183/t23/webp1/138.webp') center/cover no-repeat;overflow: hidden;filter: contrast(1.2);perspective: 1000px;position: relative;z-index: 1;--state: paused; --sy: 6deg; --sz: 100deg;}
#mplayer {position: absolute;width: 300px;height: 300px;right: 30px;bottom: 0;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1964109091" autoplay loop></audio>

<script>
(function () {
Array.from({length: 64}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'line';
        sp.style.cssText += `
                --sy: ${Math.random() * 720 - 360}deg;
                --sz: ${Math.random() * 720 - 360}deg;
                background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
        `;
        mplayer.appendChild(sp);
});
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
})();
</script>

马黑黑 发表于 2023-4-15 21:11

帖子代码
<style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: green url('https://638183.freep.cn/638183/t23/webp1/138.webp') center/cover no-repeat;overflow: hidden;filter: contrast(1.2);perspective: 1000px;position: relative;--state: paused; --sy: 6deg; --sz: 100deg;}
#mplayer {position: absolute;width: 300px;height: 300px;right: 30px;bottom: 0;cursor: pointer;transform-style: preserve-3d;}
.line {position: absolute;width: 1px;height: 100%;transform-style: preserve-3d;}
@keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
</style>

<div id="papa">
        <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1964109091" autoplay loop></audio>

<script>
Array.from({length: 64}).forEach( (item,key) => {
        let sp = document.createElement('span');
        sp.className = 'line';
        sp.style.cssText += `
                --sy: ${Math.random() * 720 - 360}deg;
                --sz: ${Math.random() * 720 - 360}deg;
                background: rgba(${Math.random() * 50}, ${Math.random() * 255}, ${Math.random() * 50}, .8);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
        `;
        mplayer.appendChild(sp);
});
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

马黑黑 发表于 2023-4-15 21:11

css-doodle版：

未闻花名 (52qingyin.cn)

马黑黑 发表于 2023-4-15 21:12

css-doodle版代码
<script src="https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js"></script>
<style>
#papa {margin: 30px auto;width: 1024px;height: 640px;background: green url('https://638183.freep.cn/638183/t23/webp1/138.webp') center/cover no-repeat;filter: contrast(1.2);position: relative;}
</style>
<div id="papa">
        <css-doodle>
                :doodle {
                        @grid: 8 / 300px;
                        @shape: circle;
                        perspective: 200px;
                        cursor: pointer;
                        position: absolute;
                        right: 180px;
                        bottom: 0;
                        z-index: 10;
                       --state: running;
                }
                @size: 1px 100%;
                @place-cell: center;
                background: rgba(@rn(50), @rn(255), @rn(50), .8);
                --sy: @rand(-360deg, 360deg);
                --sz: @rand(-360deg, 360deg);
                transform: rotateY(var(--sy)) rotateZ(var(--sz));
                animation: rot 30s linear infinite var(--state);
                @keyframes rot { to { transform: rotateY(calc(var(--sy) + 360deg)) rotateZ(calc(var(--sz) + 360deg)); } }
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1964109091" autoplay loop></audio>
</div>

<script>
let doo = document.querySelector('css-doodle');
let mState = () => doo.style.setProperty('--state', aud.paused ? 'paused' : 'running');
doo.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

樵歌 发表于 2023-4-15 21:19

这花花绝对要成妖精了{:4_173:}

马黑黑 发表于 2023-4-15 21:21

樵歌 发表于 2023-4-15 21:19
这花花绝对要成妖精了

{:4_172:}

上海朝阳 发表于 2023-4-15 21:24

美的成仙啦

马黑黑 发表于 2023-4-15 21:27

上海朝阳 发表于 2023-4-15 21:24
美的成仙啦

这是传说中的花仙{:5_106:}

雨中悄然 发表于 2023-4-15 21:35

纯色之美。。{:4_187:}

马黑黑 发表于 2023-4-15 21:55

雨中悄然 发表于 2023-4-15 21:35
纯色之美。。

加了亮度，原图有些暗

红影 发表于 2023-4-15 23:24

这个真漂亮，这个就是你说的执偏向于某些颜色的变色吧{:4_187:}

红影 发表于 2023-4-15 23:26

马黑黑 发表于 2023-4-15 21:11
css-doodle版：

未闻花名 (52qingyin.cn)

针对这个效果的话，还是这里的更感觉细密漂亮。

樵歌 发表于 2023-4-16 07:47

马黑黑 发表于 2023-4-15 21:21


妖精比仙儿好，妖精敢爱敢恨，热情似火，很对味口{:4_189:}

马黑黑 发表于 2023-4-16 08:26

樵歌 发表于 2023-4-16 07:47
妖精比仙儿好，妖精敢爱敢恨，热情似火，很对味口

看样纸你还挺有品位{:5_106:}

马黑黑 发表于 2023-4-16 08:26

红影 发表于 2023-4-15 23:24
这个真漂亮，这个就是你说的执偏向于某些颜色的变色吧

差不多吧

马黑黑 发表于 2023-4-16 08:27

红影 发表于 2023-4-15 23:26
针对这个效果的话，还是这里的更感觉细密漂亮。

这两个，理论上它们达成的效果没有二致

绿叶清舟 发表于 2023-4-16 10:38

这个颜色漂亮

马黑黑 发表于 2023-4-16 11:03

绿叶清舟 发表于 2023-4-16 10:38
这个颜色漂亮

嗯，不丑

红影 发表于 2023-4-16 11:12

马黑黑 发表于 2023-4-16 08:27
这两个，理论上它们达成的效果没有二致

那就是感觉问题了{:4_173:}

红影 发表于 2023-4-16 11:13

马黑黑 发表于 2023-4-16 08:26
差不多吧

非常有立体感，像个刺球{:4_173:}

查看完整版本: 未闻花名