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

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

news 2025/11/9 5:26:34

【今日文章】：如何用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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/11/7 9:56:12

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/11/8 2:45:44

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/11/8 10:30:28

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/11/7 19:58:13

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

编程新知 2025/11/8 5:25:15

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/8/17 23:35:19

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/11/7 19:43:16