马黑黑 发表于 2022-1-21 18:00

繁星似锦

本帖最后由 马黑黑 于 2022-1-21 18:01 编辑 <br /><br /><style>
#sky {
        margin: 10px auto;
        width: 720px;
        height: 460px;
        background-color: rgba(0,0,0,0.85);
        position: relative;
}
#sky:hover .wyyfram { display:block; }
.moon {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 20px 20px 0 0 silver;
        z-index: 100;
        left: 70%;
}
.wyyfram { position: relative; top: 350px; display: none; opacity: 0.5; }
#sky span {
        position: absolute;
        display: inline-block;
        width: 3px;
        height: 3px;
        background: white;
        opacity: 0.6;
        transform: rotate(45deg);
        animation: splash var(--d) infinite;
}

@keyframes splash {
        0%, 100% { opacity: 0.2; }
        50% { opacity: 0.8; transform:scale(1.5) rotate(-45deg); }
}

</style>

<div id="sky">
        <div class="moon"></div>
        <iframe class="wyyfram" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=410042763&auto=1&height=66"></iframe>
</div>

<script>

var str = "";
for (i=0; i<600; i++) {
        str += '<span style="left: ' + Math.ceil(Math.random()*100) + '%; top: ' + Math.ceil(Math.random()*100) + '%; --d:' + Math.ceil(Math.random()*10+0.5) + 's;"></span>';
}
document.getElementById('sky').innerHTML += str;

</script>

红影 发表于 2022-1-21 19:01

这个神奇了，不需要一个个设置，一下子这么多星星啊{:4_187:}

马黑黑 发表于 2022-1-21 19:02

红影 发表于 2022-1-21 19:01
这个神奇了，不需要一个个设置，一下子这么多星星啊

你再去数星星

红影 发表于 2022-1-21 19:03

以为你还是前面十颗星那样的设置呢，觉得要写多少个语句啊，结果不是。
全代码模拟的，厉害，居然还有个月亮{:4_187:}

马黑黑 发表于 2022-1-21 19:05

红影 发表于 2022-1-21 19:03
以为你还是前面十颗星那样的设置呢，觉得要写多少个语句啊，结果不是。
全代码模拟的，厉害，居然还有个月 ...
月亮是简单的

樵歌 发表于 2022-1-21 19:19

一闪一闪亮晶晶，满天都是小星星，，，，小黑真会玩。

马黑黑 发表于 2022-1-21 19:54

樵歌 发表于 2022-1-21 19:19
一闪一闪亮晶晶，满天都是小星星，，，，小黑真会玩。

玩玩更健康

红影 发表于 2022-1-21 19:59

马黑黑 发表于 2022-1-21 19:02
你再去数星星

这回数不了了，太多了{:4_170:}
原来是报复我前面那个帖子数星星啊。

红影 发表于 2022-1-21 20:00

马黑黑 发表于 2022-1-21 19:05
月亮是简单的

只对你来说不难，对我来说难得很{:4_204:}

马黑黑 发表于 2022-1-21 20:00

红影 发表于 2022-1-21 19:59
这回数不了了，太多了
原来是报复我前面那个帖子数星星啊。

不是的。那是开始，总要先会画星星，然后量产。

马黑黑 发表于 2022-1-21 20:01

红影 发表于 2022-1-21 20:00
只对你来说不难，对我来说难得很

懂得原理就不难了

小辣椒 发表于 2022-1-21 20:02

黑黑用代码语句制作特效了，太棒了！{:4_199:}

马黑黑 发表于 2022-1-21 20:17

小辣椒 发表于 2022-1-21 20:02
黑黑用代码语句制作特效了，太棒了！

小辣椒晚上好！身体好点了吗

樵歌 发表于 2022-1-21 20:53

马黑黑 发表于 2022-1-21 19:54
玩玩更健康

玩出新花样，玩出大学问来，本事呵。

红影 发表于 2022-1-21 20:57

马黑黑 发表于 2022-1-21 20:00
不是的。那是开始，总要先会画星星，然后量产。

结果量产了满天的星星，星星要是这么容易，坠落多少都不怕了{:4_189:}

红影 发表于 2022-1-21 20:57

马黑黑 发表于 2022-1-21 20:01
懂得原理就不难了

目前还不懂{:4_187:}

马黑黑 发表于 2022-1-21 21:24

红影 发表于 2022-1-21 20:57
目前还不懂

懂它不难，是CSS+HTML，然后是JS做繁琐的部分，也是基于HTML和JS的

马黑黑 发表于 2022-1-21 21:24

红影 发表于 2022-1-21 20:57
结果量产了满天的星星，星星要是这么容易，坠落多少都不怕了

这回不坠落，但有少量会在边缘

马黑黑 发表于 2022-1-21 21:26

樵歌 发表于 2022-1-21 20:53
玩出新花样，玩出大学问来，本事呵。

哪里哪里，过奖

红影 发表于 2022-1-21 22:12

马黑黑 发表于 2022-1-21 21:24
懂它不难，是CSS+HTML，然后是JS做繁琐的部分，也是基于HTML和JS的

看样子要一段一段地弄明白才行。
页: [1] 2
查看完整版本: 繁星似锦