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

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

news 2026/2/10 23:15:08

【今日文章】：如何用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｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/8 15:03:06

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29