马黑黑 发表于 2023-12-10 22:17

逃脱引力

<style>
        #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #666 url('https://638183.freep.cn/638183/t23/webp2/ybli.webp') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
        #player { width: 300px; cursor: pointer; animation: rotating 18s linear infinite var(--state); }
        mov-ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: tan; animation: imov 6s infinite; }
        @keyframes moving {
                from { opacity: 0; transform: translate(0,0); }
                to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
        }
        @keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="player" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" alt="" title="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1996509752" autoplay loop></audio>
</div>

<script>

(function() {

let all = 100;
for(let i = 0; i < all; i++) {
        let movBall = document.createElement('mov-ball');
        let hudu = Math.PI / 180 * 360 / all * i;
        let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
        movBall.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
        `;
        papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

马黑黑 发表于 2023-12-10 22:19

帖子代码
<style>
        #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #666 url('https://638183.freep.cn/638183/t23/webp2/ybli.webp') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
        #player { width: 300px; cursor: pointer; animation: rotating 18s linear infinite var(--state); }
        mov-ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: tan; animation: imov 6s infinite; }
        @keyframes moving {
                from { opacity: 0; transform: translate(0,0); }
                to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
        }
        @keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <img id="player" src="https://638183.freep.cn/638183/web/svg/sunfl-1.svg" alt="" title="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1996509752" autoplay loop></audio>
</div>

<script>

(function() {

let all = 100;
for(let i = 0; i < all; i++) {
        let movBall = document.createElement('mov-ball');
        let hudu = Math.PI / 180 * 360 / all * i;
        let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
        movBall.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
        `;
        papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

朵拉 发表于 2023-12-10 22:47

坐沙发，欣赏学习哈~

马黑黑 发表于 2023-12-10 22:48

朵拉 发表于 2023-12-10 22:47
坐沙发，欣赏学习哈~

这个够简单的

朵拉 发表于 2023-12-10 22:56

马黑黑 发表于 2023-12-10 22:48
这个够简单的

好，马上完成作业~~

马黑黑 发表于 2023-12-10 22:57

朵拉 发表于 2023-12-10 22:56
好，马上完成作业~~

{:4_191:}

朵拉 发表于 2023-12-10 23:02

马黑黑 发表于 2023-12-10 22:57


马师 学生已完成作业，望喜欢哈~~

红影 发表于 2023-12-10 23:27

漂亮，那些粒子真的像渐渐逃离似的{:4_199:}

红影 发表于 2023-12-10 23:28

那蓝色背景是什么？是太空还是人的血液系统{:4_173:}

马黑黑 发表于 2023-12-10 23:32

朵拉 发表于 2023-12-10 23:02
马师 学生已完成作业，望喜欢哈~~

{:4_176:}

马黑黑 发表于 2023-12-10 23:32

红影 发表于 2023-12-10 23:28
那蓝色背景是什么？是太空还是人的血液系统

原来是想用一个稍微恐怖一点的图片，后来想想还是算了，一张平和一点的

小文 发表于 2023-12-11 08:28

很漂亮的构成{:4_187:}

醉美水芙蓉 发表于 2023-12-11 11:54

马黑黑 发表于 2023-12-11 12:25

醉美水芙蓉 发表于 2023-12-11 11:54
欣赏老师新作品！

这个应该是超级简单的吧

红影 发表于 2023-12-11 14:24

马黑黑 发表于 2023-12-10 23:32
原来是想用一个稍微恐怖一点的图片，后来想想还是算了，一张平和一点的

嗯嗯，平和的好，恐怖的会让人做噩梦的{:4_173:}

冬天的雨 发表于 2023-12-11 15:38

哈哈。。。应该可以直接套用，我的菜{:4_170:}

冬天的雨 发表于 2023-12-11 15:39

今天有电脑，争取今天完成作业{:4_205:}

马黑黑 发表于 2023-12-11 19:19

冬天的雨 发表于 2023-12-11 15:39
今天有电脑，争取今天完成作业

{:4_191:}

马黑黑 发表于 2023-12-11 19:20

红影 发表于 2023-12-11 14:24
嗯嗯，平和的好，恐怖的会让人做噩梦的

白日做梦也没什么不好

马黑黑 发表于 2023-12-11 19:20

冬天的雨 发表于 2023-12-11 15:38
哈哈。。。应该可以直接套用，我的菜

{:4_181:}
页: [1] 2 3
查看完整版本: 逃脱引力