我用 140 行代码，带你看一场流星雨⭐
 
 
 
 
📣 大家好，我叫小丞同学，今天走个治愈风，来做一个治愈系的流星雨效果
 
 
前言
 
在一个夜深人静的晚上，程序员小丞坐在屋顶上，看着屏幕上满屏的error，心里拔凉拔凉的，泪水润湿了脸庞，无数个自己提桶跑路的身影充斥在脑海之中，猛然才发现自己还没有桶。此时星空中闪过了漫天的流星，小丞看到此景，心中的bug早已化去，留下的是还原此景的豪言壮举！（梦醒了，纯属瞎编）
 
小丞把脑海中的场景描绘成了动画，开始了他的 show time
 
 
分析动画
 
产品的需求已经明确下来了，很简单实现一个流星雨效果，那么接下来我们需要对动画进行分析，然后一步步的实现最终的效果，第一次看到这个效果的时候感觉很震撼，流星的效果非常的逼真，很炫酷。我们来分析一下过程，从一般的思路来看，我们可以通过 CSS3 动画来实现，绘制一个流星，让它从右上向左下移动，流星滑动的起点和终点都在可视框之外，这样就能营造一种远端飞来的效果，同时实现动画的循环。
 
 
预处理器选择
 
那么这么多的流星个体，我们需要怎么实现呢，你能想到几种方式？
 
第一种：采用 JS 动态插入 html
 
第二种：采用 canvas 画布，通过实例化的方式创建粒子
 
第三种：纯HTML
 
我当然选择的是最简单的纯HTML啦，通过编译器的element 语法快速生成 50个 div标签（.star*50）这香，免去了考虑JS操作的性能问题，以及采用canvas画布带来的兼容性问题。
 
从小丞提供的动画来看，每个流星它的划动速度，它的间隔时间，起始的位置甚至是长度都是不一样的，那么对于这么多的元素，难道我们需要给他们一个个编写 CSS 代码吗，答案当然是是的，当然我们不会采用 css 来开发，我们可以选择CSS预处理器来开发，采用less和sass语法上存在的差异，同时sass的功能比less更加的强大。起初我准备采用less进行产品的开发，但是遇到了这样的问题：
 
在设置流星长度等属性中，需要采用random来生成随机数，但是在less的官方文档中发现，并没有内置random的 API
 
 
在查阅了资料后，发现了由于less是由JS编写的，所以它天然的支持JS语法，需要在前面加上~符号，因此尝试用JS内置对象Math来调用生成随机数，结果出现了编译报错的情况，但是在网上的less转化工具中能正确转化，有点不解…（诡异）
 
 
但是我们可以清晰的在sass的官方文档上看到random的身影，这样就没有这么多怪事了，本次的产品确认采用sass预处理器进行代码编写
 
 
产品制作
 
确定了使用的开发工具，我们就可以正式的来编写代码了
 
1. 确定流星移动方向
 
从动画来看，流星的移动方向是一定的，我们可以通过给流星添加一个动画，然后将整个装流星粒子的容器旋转一定的角度，这样流星的移动方向就会是一定方向上的
 
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    transform: rotate(-25deg);
}
 
 
蓝色方块的纵向方向就是流星移动的方向
 
确定了流星的移动方向，接下来我们来绘制流星样式
 
2. 绘制流星样式
 
流星的效果通过两部分来组成，一个是拖尾，一个是星星
 
首先拖尾的效果，可以通过渐变来实现
 
background: linear-gradient(45deg, currentColor, transparent);
filter: drop-shadow(0 0 6px currentColor);
 
这里采用了一个currentColor表示的是当前字体的颜色，这是一个变量，可以直接使用，这样的好处是在改变color值时拖尾的颜色和阴影的颜色就会直接改变，不用去单独改变两个值
 
 
关于阴影的处理，大多数采用的都是box-shadow，以致于drop-shadow很少人知道，它和box-shadow有着怎样的区别呢？
 
box-shadow简单翻译一下“盒阴影”。是css3中新增的属性，用于增加边框阴影，让原有的元素变得更多样性，有四个参数，第一个控制水平方向偏移，第二个控制垂直方向偏移，第三个控制模糊度，第四个控制阴影颜色。
 
drop-shadow也是用于投影，但是它不局限于矩形区域。
 
 
 
drop-shadow符合真实世界的投影，非透明的颜色就有投影，透明的就没有投影，而box-shadow只是盒子投影，即使盒子区域内有透明区域，也会投影
 
 
 
上图（来源网络，侵删）就展示了两者间显著的区别，在很多场景drop-shadow很实用啊！！
 
流星头部星星的效果
 
用双伪元素，绘制两个两头细小的短线，定位到头部，旋转一定角度，实现闪亮星星效果
 
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}
 
 
3. 添加划动动画
 
对于单个流星的滑动动画非常简单，只需要改变一下位置就可以了，在开始的时候调整transformX的值将流星移出可视区外
 
// 给单个流星添加animation以及transform属性
transform: translate3d(220vh, 0, 0);
animation: fall 10s linear infinite;
// 动画声明
@keyframes fall {
    to {
         transform: translate3d(-30em, 0, 0);
    }
}
 
但是我们需要操作的是全部的粒子，每个粒子都要随机时间，远不止这么简单，继续向下看
 
4. 循环设定样式
 
由于每个流星的动画延时，动画时间等属性是在一定范围内的随机数，因此需要通过循环来设定样式
 
首先需要先在css中编写一个能返回在一定范围内的随机数函数
 
@function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));
    @return $random_range;
}
 
这个方法接收两个参数，左边界和有边界，通过scss中自带的random方法获取一个随机数，然后乘以两个边界的差值，再加上左边界，这样就能实现需求
 
对于scss中编写函数，需要特别注意它的语法
 
在调用函数的时候通过random_range(0vh, 10000vh)来获取，在使用的时候可以这样：
 
--star-length:#{random_range(500em, 750em) / 100};
 
接下来给每个流星设置随机样式
 
@for $i from 1 through $star-count {
    &:nth-child(#{$i}) {
        --star-length:#{random_range(500em, 750em) / 100};
        --top-offset: #{random_range(0vh, 10000vh) / 100};
        --fall-duration: #{random_range(6000, 12000s) / 1000};
        --fall-delay: #{random_range(0, 10000s) / 1000};
    }
}
 
在.star的样式代码内，编写一个循环，star-count是在前面定义的一个长度变量为50这样循环遍历i会从0递增到50，这样就能通过nth-child(i)来给50流星粒子添加样式
 
scss循环代码转化后
 
 
这样每个流星元素就能有独立的随机的属于自己的样式，从而实现随机的效果
 
5. 绑定动画
 
animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
 
将之前个流星粒子添加的animation样式更改为自己的动画时间和延时时间
 
 
6. 添加背景
 
最后加上一个符合场景的绝美的背景，接下来让我陪你们看一场流星雨吧！
 
 
总结
 
通过这篇文章我们学到了什么呢？
 
scss函数
scss循环设置样式
box-shadow和drop-shadow的区别
伪元素的妙用
拖尾效果的实现
 
完整 scss 代码
 
html代码只需要在body中输入.container>.star*50回车即可
 
/* 设置背景 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(starBgc.jpg);/* 背景图 */
    background-size: cover;
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    transform: rotate(-25deg);
}

// 生成范围内随机数函数
@function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));
    @return $random_range;
}

.star {
    $star-count: 50;
    --star-height: 2px;
    --star-width: calc(var(--star-length) / 6);
    position: absolute;
    /* 后面给每个星星都添加一个 */
    top: var(--top-offset);
    left: 0;
    /* 设定每个星星的长宽 */
    width: var(--star-length);
    height: var(--star-height);
    color: #fff;
    background: linear-gradient(45deg, currentColor, transparent);
    border-radius: 50%;
    /* drop-shadow和box-shadow的区别 */
    filter: drop-shadow(0 0 6px currentColor);
    /*简写xyz  */
    transform: translate3d(220vh, 0, 0);
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;

    // 循环
    @for $i from 1 through $star-count {
        &:nth-child(#{$i}) {
            --star-length:#{random_range(500em, 750em)/100};
            --top-offset: #{random_range(0vh, 10000vh) / 100};
            --fall-duration: #{random_range(6000, 12000s) / 1000};
            --fall-delay: #{random_range(0, 10000s) / 1000};
        }
    }

    // 伪元素制作星星
    &::before,
    &::after {
        position: absolute;
        content: '';
        top: 0;
        left: calc(var(--star-width) / -2);
        width: var(--star-width);
        height: 100%;
        background: linear-gradient(45deg, transparent, currentColor, transparent);
        border-radius: inherit;
        animation: blink 2s linear infinite;
    }

    &::before {
        transform: rotate(45deg);
    }

    &::after {
        transform: rotate(-45deg);
    }
}

@keyframes fall {
    to {
        transform: translate3d(-30em, 0, 0);
    }
}

@keyframes blink {
    50% {
        opacity: 0.6;
    }
}
 
 
 
以上就是本文的全部内容了，希望你能喜欢💛，有什么问题可以评论区留言噢~
 

hello，大家好，我是wangzirui32，今天我们来学习如何用Pygame制作一场漂亮的流星雨。
 开始学习吧！
 

 
文章目录
 
前言
1. 素材图片
2. 项目结构
3. 编写代码
3.1 Star类
3.2 主项目demo.py
  
4. 效果展示
写在最后

 
前言
 
最近几乎没有比较大型的流星雨可以欣赏，当我正在家里“愁眉不展”时，我看到了Python。于是，就想用Python模拟一场流星雨，妙~啊！
 
1. 素材图片
 
完成这个程序，你需要一张月亮图片：
 moon.jpg
 和笔者画的一颗小星星：
 star.png
 
 
2. 项目结构
 
结构如下：
 
demo/
	star.py
	demo.py
	star.png
	moon.jpg
 
其中，star.py文件主要存放Star类，这个类要处理星星移动等操作，demo.py是项目的主文件，我们将在这里编写窗口代码，至于star.png和moon.jpg可以自行导入上面的素材。
 
3. 编写代码
 
3.1 Star类
 
打开star.py，输入以下代码：
 
# -*-  coding: utf-8 -*-
import pygame
import random

class Star(pygame.sprite.Sprite):
    def __init__(self, screen, width, height):
        super(Star, self).__init__() # 继承精灵类

        self.screen = screen

		# 加载图片并获取rect矩形
        self.image = pygame.image.load("star.png")
        self.rect = self.image.get_rect()

        self.screen_width = width
        self.screen_height = height

		# 设置初始位置 使用随机数生成
        self.rect.x = random.randint(0, width)
        self.rect.y = random.randint(0, height)

    def blit(self): # 绘制星星
        self.screen.blit(self.image, self.rect)

    def update(self):
        if self.rect.top > self.screen_height: # 监测有没有超出屏幕
            self.kill()
        elif self.rect.left > self.screen_width:
            self.kill()
        else: # 移动位置
            self.rect.x += 1
            self.rect.y += 1
 
3.2 主项目demo.py
 
代码：
 
# -*-  coding: utf-8 -*-
import star
import pygame
import sys

pygame.init()

width, height = 690, 517
screen = pygame.display.set_mode((width, height))

pygame.display.set_caption("流星雨")

# 加载背景图片
background = pygame.image.load("moon.jpg")

# stars精灵组
stars = pygame.sprite.Group()

rates = 0

while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            pygame.quit()
            sys.exit()

	# 绘制背景
    screen.blit(background, (0, 0))
    # 对stars精灵组进行更新和绘制
    stars.update()
    stars.draw(screen)

    if rates % 20 == 0:
    	# 添加一个星星
        stars.add(star.Star(screen, width, height))

    rates += 1

    pygame.display.update()
 
4. 效果展示
 
如图：
 
 
写在最后
 
这个程序你还可以拓展，可以设置rates变量的值，使其星星的生成频率变高，也可以使用 pygame.transform.rotate(旋转图片, 旋转度数) 函数对星星图片进行旋转（Tips：如果电脑配置不高，建议不要尝试，因为显卡的香味是会让你“垂涎三尺”）。
 
 
好了，今天的课程就到这里，我是wangzirui32，我们下次再见！拜拜！

 
 
贝茜听说了一个骇人听闻的消息：一场流星雨即将袭击整个农场，由于流星
 体积过大，它们无法在撞击到地面前燃烧殆尽，届时将会对它撞到的一切东西
 造成毁灭性的打击。很自然地，贝茜开始担心自己的安全问题。以 FJ 牧场中最
 聪明的奶牛的名誉起誓，她一定要在被流星砸到前，到达一个安全的地方（也就
 是说，一块不会被任何流星砸到的土地）。如果将牧场放入一个直角坐标系中，
 贝茜现在的位置是原点，并且，贝茜不能踏上一块被流星砸过的土地。
 根据预报，一共有 M 颗流星(1 <= M <= 50,000)会坠落在农场上，其中第 i 颗
 流星会在时刻 T_i (0 <= T_i <= 1,000)砸在坐标为(X_i, Y_i)
 (0 <= X_i <= 300；0 <= Y_i <= 300)的格子里。流星的力量会将它所在的格子
 ，以及周围 4 个相邻的格子都化为焦土，当然贝茜也无法再在这些格子上行走。
 贝茜在时刻 0 开始行动，它只能在第一象限中，平行于坐标轴行动，每 1 个时刻中，
 ，她能移动到相邻的（一般是 4 个）
 格子中的任意一个，当然目标格子要没有被烧焦才行。如果一个格子在时刻 t 被
 流星撞击或烧焦，那么贝茜只能在 t 之前的时刻在这个格子里出现。
 请你计算一下，贝茜最少需要多少时间才能到达一个安全的格子。
 
 
传统的搜索
 
应该没什么问题
 
#include <bits/stdc++.h>
using namespace std;
typedef long long ll;
template<typename T>inline void read(T &FF){
	T RR=1;FF=0;char CH=getchar();
	for(;!isdigit(CH);CH=getchar())if(CH=='-')RR=-1;
	for(;isdigit(CH);CH=getchar())FF=(FF<<1)+(FF<<3)+(CH^48);
	FF*=RR;
}
template<typename T>inline void write(T x){
	if(x<0)putchar('-'),x*=-1;
	if(x>9)write(x/10);
	putchar(x%10+48);
}
template<typename T>inline void writen(T x){
	write(x);
	puts("");
}
int n,a[1010][1010],h[1010][1010],xx;
int dx[4]={-1,1,0,0};
int dy[4]={0,0,-1,1};
void work(int x,int y,int t){
	a[x][y]=min(a[x][y],t);
	for(int i=0;i<4;i++){
		int tx=x+dx[i],ty=y+dy[i];
		if(tx>=0&&ty>=0)a[tx][ty]=min(a[tx][ty],t);
	}
}
queue<int>x;
queue<int>y;
queue<int>s;
int main(){
	memset(a,0x3f,sizeof(a));xx=a[0][0];
	read(n);
	for(int i=1;i<=n;i++){
		int x,y,t;
		read(x),read(y),read(t);
		work(x,y,t);
	}h[0][0]=1;
	x.push(0);
	y.push(0);
	s.push(0);
	while(x.size()){
		for(int i=0;i<4;i++){
			int tx=x.front()+dx[i],ty=y.front()+dy[i];
			if(tx>=0&&ty>=0&&s.front()+1<a[tx][ty]&&!h[tx][ty]){
				h[tx][ty]=1;
				if(a[tx][ty]==xx){
					cout<<s.front()+1;
					return 0;
				}
				x.push(tx);
				y.push(ty);
				s.push(s.front()+1);
			}
		}
		x.pop();
		y.pop();
		s.pop();
	}puts("-1");
	return 0;
}

java流星雨告白
 
这是我参考一个古老版本写的，他所有的内容就只有一条线形成流星。
 
新手操作
 过程就是：先有流星雨，然后出现告白的字，然后调用本地播放器，播放一段我的视频。
 
2020的七夕用了，效果嘛，不如一个520的红包（桑心），并不是告白，是写给我女朋友的。
 
实现机制：
 流星：是填充的小圆圈做的头，尾部就一条线。
 文字：文字的依次出现是我加了自定义统计数，因为是多线程一直使用，计数也在累加，所以当计数达到某个数时，执行文字段代码，所以有了依次出现的效果。（方法有些笨，而且计数好想超过了1700，就不行了，我也不知道怎么回事）。
 月亮：画两个圆，一个白色，一个黑色，然后叠加一部分
 星星：有些强行和莫名，哈哈，同位置，两种白色，一种纯白，一种淡白，交替执行，造成一种闪烁的效果（有些勉强）。
 
截图如下
 
 
package 流星雨;
//其中有一些莫名的代码，哈哈

import java.io.*;
import java.util.*;
import java.awt.*;
import javax.swing.*;

public class 流星雨 extends JFrame implements Runnable {
    Canvas canvas = new Canvas();   
    public 流星雨() {
    	int height = Toolkit.getDefaultToolkit().getScreenSize().height;
    	int wight = Toolkit.getDefaultToolkit().getScreenSize().width;
    	setDefaultCloseOperation(EXIT_ON_CLOSE);
        this.setSize(wight,height);
        //this.setLocation(-1, 0);
        canvas.setSize(this.getSize().width, this.getSize().height);
        this.getContentPane().add(canvas, BorderLayout.CENTER);
        this.pack();
        canvas.setBackground(Color.BLACK);
        this.setVisible(true);
    }
    ArrayList<Rain> rainlist = new ArrayList<流星雨.Rain>();
    //ArrayList<Rain> rr = new ArrayList(); 
    //ArrayList<Rain> xr = new ArrayList(); 
    Random random = new Random();  
    public void paint() throws IOException{
        Image image = createImage(this.getSize().width, this.getSize().height);
        Graphics g = image.getGraphics();
        g.setColor(Color.black);
        g.fillRect(0, 0, this.getSize().width, this.getSize().height);
        for(int i = 0; i < 10; i++){
            rainlist.add(new Rain(getSize().width/4+random.nextInt()%(getSize().width+getSize().width/4)
            	,getSize().width/4+random.nextInt()%(getSize().width+getSize().width/4)
            			,getSize().width/4+random.nextInt()%(getSize().width+getSize().width/4)));
        }
        for(int i = 0; i < rainlist.size(); ){
            rainlist.get(i).paint(g);
           // rr.get(i).paint(g);     
            if(rainlist.get(i).y > this.getSize().height){
                rainlist.remove(i);
            } else {
                i++;
            }
        }
        canvas.getGraphics().drawImage(image, 0, 0, null);
    }  
    class Rain {	
    	int ci = 0;
    	int ci1 = 0;
        public int x, y, a, b,c,d;
        public Rain(int x,int a,int c){
            this.x = x;
            this.y = 0;
            this.a = a;
            this.b = 0;
            this.c = c;
            this.d = 0;
        }    
        public void paint(Graphics g) throws IOException{
            //黑色圆遮掉白色圆，形成月亮
	        g.setColor(Color.white); 
	      	g.fillOval(20, 20, 60, 60); 
	      	g.setColor(Color.BLACK); 
	      	g.fillOval(0, 0, 60, 60); 
        	int R=(int)(Math.random()*255);
			int G=(int)(Math.random()*255);
			int B=(int)(Math.random()*255);
            //偶尔快的流星
            int xing =(int)(Math.random()*50 + 1);
            int xing1 = (int)(Math.random()*50 + 1);
            int xing2 = (int)(Math.random()*50 + 1);
            if(xing == 20 && xing1 > 5) {
            g.setFont(new Font("",Font.BOLD,20));
            g.setColor(new Color(250,250,250));
      	    g.drawString("★", 30, 20);
        	g.setColor(new Color(180,180,180));
      	    g.drawString("★", 30, 20);  	  
            }
      	/* g.setColor(new Color(220,220,220));
   	     g.drawString("★", 20, 340);*/   
            if(xing == 1 && xing1 == 5 && xing2 == 5) {
            for(int i = 0 ; i < 10 ;i++) {
                /*ThreadLocalRandom tt = ThreadLocalRandom.current();
                int v = tt.nextInt(300);
                int vv = tt.nextInt(1080);*/
                  g.setColor(new Color(160,160,160));
            	  g.drawString("★", 100, 100);
            	  g.setColor(new Color(220,220,220));
            	  g.drawString("★", 100, 100);
            	/  
            	  g.setColor(new Color(160,160,160));
            	  g.drawString("★", 800, 34);
            	  g.setColor(new Color(220,220,220));
            	  g.drawString("★", 800, 34);
            	//
            	  g.setColor(new Color(160,160,160));
            	  g.drawString("★", 300, 20);
            	  g.setColor(new Color(220,220,220));
            	  g.drawString("★", 300, 20);
            }
            }
			//流星雨
            g.setColor(new Color(R,G,B));
        	//g.drawOval(x-2, y-3, 5, 4);
        	g.setColor(Color.white);
        	g.fillOval(x-2, y-2, 4, 4);
        	g.setColor(new Color(200,200,200));
            g.drawLine(x+19,y-20, x, y);
            x-=10;
            y+=10;       
            //文字描述
            if(xing == 1 && xing1 == 5 && xing2 >= 40) {
                g.setColor(Color.white);
            	g.fillOval(a-2, b-2, 4, 4);
            	g.setColor(new Color(200,200,200));
                g.drawLine(a-850,b+1000, a, b);
                a-=10;
                b+=10;           
                }
            int c = 300 ;
            int d = 100;
            String zi = "能遇到你，是我最大的幸运";  
            ci = ci +20;       
            if(ci == 700) { 
            String[] f = zi.split(",");
	            for(int i = 0 ; i < f.length ; i++) {
	            g.setColor(new Color(255,255,255));
	            g.setFont(new Font("宋体",Font.BOLD,20));
	            g.drawString(f[i], c, d);
	            c+=20;      
	            } 
           }      
            if(ci == 1000) {	
				c -= 20;
				d += 50;
				String zi1 = "能和你在一起，是我最幸福的事";
	            String[] f1 = zi1.split(",");
	            for(int i = 0 ; i < f1.length ; i++) {
	            g.setColor(new Color(255,255,255));
	            g.setFont(new Font("宋体",Font.BOLD,20));
	            g.drawString(f1[i], c, d);
	            c+=20;      
	            }             
            }     
           //ci1+=20;
           if(ci == 1300) {
	           	d += 100;
	   			c -= 30;
	   			String zi2 = "要开开心心的，我永远爱你，节日快乐呀";
                String[] f2 = zi2.split(",");
                for(int i = 0 ; i < f2.length ; i++) {
                g.setColor(new Color(255,255,255));
                g.setFont(new Font("宋体",Font.BOLD,20));
                g.drawString(f2[i], c, d);
                c+=20;          
            }  
            } 
           if(ci == 1500) {
              	d += 150;
      			c -= 30;
      			String zi2 = "下面，我来支舞，希望给你带来快乐";
                String[] f2 = zi2.split(",");
                for(int i = 0 ; i < f2.length ; i++) {
                g.setColor(new Color(255,255,255));
                g.setFont(new Font("宋体",Font.BOLD,20));
                g.drawString(f2[i], c, d);
                c+=20;              
               }
           }
        }
        }       
    public void run(){
    	int i =0;
        while(true){
            try {i+=20;
                if(i == 1600){File file = new File("D:\\eclipse素材库\\手指舞.mp4");
             	Process p = Runtime.getRuntime().exec("C:\\Program Files (x86)\\IQIYI Video\\QyClient.exe " +file); //.exe后面留有空格
                }
                paint();
               // paint1();
                Thread.sleep(30);          
            } catch (Exception e) {
                e.printStackTrace();
                           
            }
        }  
    }
    public static void main(String[] args) throws IOException {
        (new Thread(new 流星雨())).start();
           }
}