8
今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅
source link: https://blog.csdn.net/nokiaguy/article/details/119700535
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅
今天是七夕节、用100行代码下一场流星雨、许一个愿、来一场美丽的邂逅
这个程序的核心使用CSS实现，基本原理就是利用CSS控制若干个div，本例是50个，当然，你可以弄更多的div，不过适当的流星是浪漫，如果流行太多了，恐龙就要灭绝了！
现在说一下基本实现原理，首先用js动态产生若干个div，看下面的代码：
这段代码产生了51个div，其中1个div是最外层的div，另外50个div要放在这个div中。最外层div的class是stars，其他50个div的class是star。 另外还在style中加入了一些属性，用于随机控制每一颗流行的属性，如尾巴长短，跌落时间等。
接下来在添加下面的样式用来描述stars，用来控制星星整体的初始位置。
然后编写下面的star样式，这些样式用来控制每一颗星星的初始状态，var描述相关的变量。
剩下的就是一些控制流星跌落过程中样式的，如下面的代码用来控制流星尾部在跌落过程中的变化。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK