【今日文章】：如何用css 实现星空效果

需求
实现
tips:

需求

用CSS 实现星空效果的需求：

屏幕上有“星星”，且向上移动。
移动的时候，动画效果要连贯，不能出现闪一下的样子。

实现

这里我们需要知道，“星星”是怎么产生的。
通过box-shaow: xxx, xxx, xxx, xxx; 就能产生多个阴影，这些阴影也就是我们需要的星星。

其次是星星的动画是怎么做的？

星星向上移动，且移动完成以后，没有“闪”一下的效果。这是常见的动画上面的需求，我们通常的做法就是复制一份一样的“星星”出来。上面的原来的div动画结束以后，接着显示下面的“星星”。

在这里插入图片描述

<html>
<body>
   <div class="star" id="star">div>
   <div class="centerFont"> 星空效果 div>
body>
html>

<style>
html{
 height:100%;
 background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);
 overflow:hidden
}

/*
  目的是让元素平铺页面 
  position:absolute;
  left:0;
  right:0;
  
  让元素中的东西居中
  text-align:center;
   
 */
.centerFont{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  color:#fff;
  text-align:center;
  font-size:50px;
  margin-top:-25px;
}


/*
   1. 通过box-shadow中写多个偏移的阴影，就能形成星空效果。   
 */
.star{
   position:fixed;
   width:10px;
   height:10px;
   border-radius:50%;
   background:red;
   left:0;
   right:0;
   box-shadow:90vh 90vh #fff, 60vh 70vh #fff, 70vh 14vh #fff, 60vh 13vh #fff, 20vh 12vh #fff, 80vh 10vh #fff, 15vh 15vh #fff , 15vh 15vh #fff, 20vh 20vh #fff;
   animation: moveup 100s;
}

/*
   3. 写一个子元素，复制star， 当动画结束的时候，展示一模一样的子元素。
      不会出现动画“闪”一下的效果。   
 */
.star::after{
	content:"";
	position:fixed;
	background:red;
    left:0;
    right:0;
	top:100vh;/* 这是重点 */
	border-radius:inherit; /* 继承父元素 */
	box-shadow:inherit;
	width:inherit;	
	height:inherit;
}


/*
   2. 星空是需要移动的，那怎样的动画效果才合理呢？
   
   首先第一步是，整个星空向上移动100vh。
   这个时候移动100vh以后，下面没东西了。
			最合理的解决方案是 "复制" 一份出来。
 */
@keyframes moveup{
    100%{
	   transform:translateY(-100vh)
	}
}


style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

tips:

父亲display:flex；子元素margin:auto。

这个时候能上下左右居中的原理是，margin:auto能填满子元素到父元素上下左右的距离。

如果是margin-left:auto，那是子元素填满子元素左侧到父元素的距离。

相关阅读:
Linux线程同步（上）
4.2 K8S超级完整安装配置
详解JS的四种异步解决方案：回调函数、Promise、Generator、async/await
SpringBoot整合SSM项目实战
七、基于FreeRTOS&STM32移植MQTT
从零实现FFmpeg6.0+ SDL2播放器
管理类联考——英语二——阅读篇——题材：环保
个人用户免费，亚马逊正式推出 AI 编程服务 CodeWhisperer
总结一下Linux环境下文件查找和文件管理的几种方法
安利一个简单实用的小技巧：图片怎么批量改尺寸

原文地址：https://blog.csdn.net/sugerfle/article/details/134281748