当前位置： 首页 > news >正文

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

news 2026/2/11 4:33:28

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

  • 需求
  • 实现
  • tips:

需求

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

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

实现

这里我们需要知道，“星星”是怎么产生的。
通过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>

tips:

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

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

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

相关文章：

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

【今日文章】&#xff1a;如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求&#xff1a; 屏幕上有“星星”&#xff0c;且向上移动。移动的时候&#xff0c;动画效果要连贯&#xff0c;不能出现闪一下的样子。 实现 这里我们需要知道&#xff0c;“星星”是…...

编程日记 2023/11/8 13:14:14

HackTheBox-Starting Point--Tier 1---Three

文章目录 一 题目二 实验过程 一 题目 Tags Web、Cloud、Custom Applications、AWS、AWS、Reconnaissance、Web Site Structure Discovery、Bucket Enumeration、Arbitrary File Upload、Anonymous/Guest Access译文&#xff1a;Web、云、定制应用程序、AWS、AWS、侦察、网站…...

编程日记 2023/11/8 13:13:14

Linux Alsa声卡驱动（2）：Machine驱动

一：Simple Card Simple Card是ASoC通用的machine driver，可支持大部分标准声卡。 驱动：kernel/sound/soc/generic/simple-card.c compatible = "simple-audio-card"; 1、设备树属性 （1）协议 属性协议格式描述simple-audio-card,format i2si2s标准格式right_j…...

编程日记 2023/11/8 13:12:13

某综合性能源集团绩效考核设计项目纪实

——设置分层分类的考核指标、建立多维度评价体系&#xff0c;增加考核结果信服力 【客户行业】能源行业 【问题类型】薪酬管理 【客户背景】 某综合性能源跨国集团是一家专注于能源加工行业的民营跨国企业&#xff0c;业务覆盖能源工程建设、高端装备制造、能源勘探开发、专…...

编程日记 2023/11/8 13:11:12

ubuntu18.04 通过创建服务实现开机自启, 启动指定脚本

下面是具体的操作过程 切换目录到root cd /root/ 新建一个脚本 vi myscript.sh 添加内容&#xff1a;设置指定网卡的ip地址 (这里根据自己需要修改) #!/bin/bash ifconfig enp0s3 10.20.60.113 赋予执行权限 chmod x myscript.sh 新建一个服务 vi /etc/systemd/system/myscr…...

编程日记 2023/11/8 13:10:11

Tomcat 9.0.x 源码编译

文章目录 一、克隆源码二、构建 Maven1&#xff09;在项目根目录中新建 pom.xml 文件2&#xff09;然后 Add Maven Projects 三、在目录中增加 home 目录四、增加启动配置五、其它问题1&#xff09;控制台乱码解决 2&#xff09;启动后访问 localhost:8080 报错解决 一、克隆源…...

编程日记 2023/11/8 13:09:10

基于SSM的旅游管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/11/8 13:08:08

多目标优化中的“latent action”是什么？

2020 NeurIPS 中的“latent action”&#xff1a; Our model defines latent action as a boundary that splits the region represented by a node into a high-performing and a low performing region. 这里的latent action代表一个边界&#xff08;分类器&#xff09;&…...

编程日记 2023/11/8 13:06:05

上海亚商投顾：三大指数小幅下跌 CPO、算力板块集体爆发

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指早间低开后震荡&#xff0c;午后一度拉升翻红&#xff0c;创业板指盘中跌近1%&#xff0c;随后探底回升跌…...

编程日记 2023/11/8 13:05:02

【C语法学习】19 -关闭和刷新文件

文章目录 1 关闭文件1.1 fclose()函数1.1.1 函数原型1.1.2 参数1.1.3 返回值 1.2 fcloseall()函数1.2.1 函数原型1.2.2 参数1.2.3 返回值 2 刷新文件2.1 缓冲区的概念2.2 缓冲区的刷新2.2.1 fflush()函数2.2.1.1 函数原型2.2.1.2 参数2.2.1.3 返回值 2.2.2 flushall()函数2.2.2…...

编程日记 2023/11/8 13:04:02

制作吉他谱软件Guitar Pro8中文版本

前面提到了使用Guitar Pro制作吉他谱的步骤&#xff0c;除此以外&#xff0c;在最新的Guitar Pro 8版本中&#xff0c;还新增了制作简谱的功能。 在窗口右侧的乐谱中&#xff0c;选择简谱按钮&#xff0c;可以打开乐谱的简谱编辑模式。 Guitar Pro-Guitar Pro 8 win-安装包ht…...

编程日记 2023/11/8 13:02:58

SpringBoot整合JUnit

1.创建新项目 说明&#xff1a;创建springboot_04_junit项目&#xff0c;选择对应的版本。 2.接口类 说明&#xff1a;新建BookDao接口。 package com.forever.dao;public interface BookDao {public void save(); }3.实现类 说明&#xff1a; 新建BookDaoImpl实现类。 pa…...

编程日记 2023/11/8 13:01:57

华为取消6000万订单影响在扩大，高通嘴硬强调不受影响

高通公布了2023年第三季度的业绩&#xff0c;业绩显示营收下滑24%&#xff0c;净利润下滑36%&#xff0c;不过高通强调预计今年四季度业绩将回升&#xff0c;意思是说华为取消订单带来的影响较小。 一、高通处境不利已延续4年时间 2019年美国对华为采取措施&#xff0c;众多中国…...

编程日记 2023/11/8 13:00:55

培训心得怎么写？CHAT帮你解决问题

问CHAT&#xff1a;请写一篇入职教师的培训心得 CHAT回复&#xff1a;作为一名新入职的教师&#xff0c;我非常感谢学校给予的这次培训机会。此次培训让我收获颇丰&#xff0c;无论是在教学理念、教学技巧上&#xff0c;还是在如何与学生、家长建立良好关系方面&#xff0c;都有…...

编程日记 2023/11/8 12:59:52

AJAX-解决回调函数地狱问题

一、同步代码和异步代码 1.同步代码 浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作&#xff0c;在上一行完成之后才会执行下一行。这也使得它成为一个同步程序。 总结来说&#xff1a;逐行执行&#xff0c;需原地等待结果后&#xff0…...

编程日记 2023/11/8 12:58:50

【Mac开发环境搭建】JDK安装、多JDK安装与切换

文章目录 JDK下载与安装下载安装 配置环境变量安装多个JDK共存 JDK下载与安装 下载 Oracle官网提供了非常多个版本的JDK供下载&#xff0c;可以点击如下链接重定向到JDK下载页面 ORACLE官网JDK下载 安装 下面的官方文档可以点开收藏到浏览器的收藏夹&#xff0c;这样后续在开…...

编程日记 2023/11/8 12:57:50

C,C++,JAVA的区别与联系

C、C和Java是三种常见的编程语言&#xff0c;它们有一些区别和联系。 区别&#xff1a; 1. 语言类型&#xff1a;C是一种过程式编程语言&#xff0c;C是在C的基础上发展而来的面向对象编程语言&#xff0c;而Java是一种面向对象编程语言。 2. 语法&#xff1a;C语言相对较为…...

编程日记 2023/11/8 12:55:47

界面控件DevExpress WPF PDF Viewer，更快实现应用的PDF文档浏览

DevExpress WPF PDF Viewer控件可以轻松地直接在Windows应用程序中显示PDF文档&#xff0c;而无需在最终用户的机器上安装外部PDF查看器。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress…...

编程日记 2023/11/8 12:54:46

nanodet训练自己的数据集、NCNN部署到Android

nanodet训练自己的数据集、NCNN部署到Android 一、介绍二、训练自己的数据集1. 运行环境2. 数据集3. 配置文件4. 训练5. 训练可视化6. 测试 三、部署到android1. 使用官方权重文件部署1.1 下载权重文件1.2 使用Android Studio部署apk 2. 部署自己的模型【暂时存在问题】2.1 生成…...

编程日记 2023/11/8 12:53:45

含泪整理的超全窗口函数：数据开发必备

最近在搞一些面试和课程答辩的时候&#xff0c;问什么是窗口函数&#xff0c;知道哪些窗口函数?最多的答案就是row_number、rank、dense_rank&#xff0c;在问一下还有其他的吗&#xff1f;这时同学就蒙了,还有其他的窗口函数&#xff1f;其实上面的回答也只是专用窗口函数&am…...

编程日记 2023/11/8 12:52:44

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/2/6 2:05:50

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

编程新知 2026/2/5 5:47:53