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

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

news 2026/4/3 2:50:03

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

可控硅在交流负载控制中的应用与实践

1. 项目概述作为一名电子工程师&#xff0c;我经常遇到需要控制交流负载的场景。传统的继电器方案虽然简单可靠&#xff0c;但在某些特殊应用场合却存在明显短板。比如需要频繁开关的场合&#xff0c;继电器的机械触点很快就会因为电弧腐蚀而失效&#xff1b;又比如需要高速切换…...

编程新知 2026/4/3 2:33:52

【数据结构】二叉树入门全解：从定义、性质到经典真题

一、先搞懂&#xff1a;什么是二叉树&#xff1f;二叉树&#xff08;Binary Tree&#xff09;是一种特殊的树形结构&#xff0c;定义非常清晰&#xff1a;它是由 n&#xff08;n≥0&#xff09; 个结点构成的有限集合&#xff0c;满足&#xff1a;空树&#xff1a;当 n0 时&…...

编程新知 2026/4/3 2:07:34

2026年，行业内热门GEO搜索优化公司口碑究竟如何？

你是否在为提升品牌在搜索引擎上的排名而烦恼&#xff1f;是否因高昂的优化成本和复杂的操作望而却步&#xff1f;又或者担心优化效果不佳&#xff0c;无法实现询盘转化&#xff1f;今天&#xff0c;我们就来深入探讨一下2026年热门的GEO优化软件&#xff0c;看看哪款能真正解决…...

编程新知 2026/4/3 1:22:43

Go Routine 调度与系统线程绑定

Go语言凭借其轻量级并发模型Goroutine&#xff0c;成为高并发场景下的明星语言。Goroutine的魔力源于其高效的调度机制&#xff0c;而它与系统线程的绑定关系更是性能优化的关键。本文将揭开Goroutine调度与线程绑定的技术面纱&#xff0c;从运行时调度器、线程池管理、工作窃取…...

编程新知 2026/4/3 1:18:41

新手避坑指南：如何根据你的Python学习路径选择Jupyter、PyCharm或VS Code

Python新手工具选择指南&#xff1a;从Jupyter到PyCharm的实战路径规划 第一次打开Python安装包时&#xff0c;那种混杂着期待与困惑的感觉我至今记得清晰——就像站在乐高积木货架前的小孩&#xff0c;明明每盒都写着"Python"&#xff0c;拆开后却发现里面的零件形状…...

编程新知 2026/4/2 23:25:01

Verilog有限状态机实战：5分钟搞定红绿灯控制器（附完整代码）

Verilog有限状态机实战&#xff1a;从红绿灯控制器掌握FPGA设计精髓 红绿灯控制器是数字电路设计的经典案例&#xff0c;也是学习Verilog有限状态机&#xff08;FSM&#xff09;的最佳切入点。作为FPGA初学者&#xff0c;你可能已经看过各种理论讲解&#xff0c;但真正动手时依…...

编程新知 2026/4/2 22:36:08

深圳地铁大数据客流分析系统：如何用开源技术栈破解千万级乘客的交通治理难题

深圳地铁大数据客流分析系统&#xff1a;如何用开源技术栈破解千万级乘客的交通治理难题 【免费下载链接】SZT-bigdata 深圳地铁大数据客流分析系统&#x1f687;&#x1f684;&#x1f31f; 项目地址: https://gitcode.com/gh_mirrors/sz/SZT-bigdata 深圳地铁作为中国…...

编程新知 2026/4/2 22:34:07

告别Lottie和SVGA：用Unity给Android应用做高性能动态引导动画的实战踩坑记录

告别Lottie和SVGA&#xff1a;用Unity给Android应用做高性能动态引导动画的实战踩坑记录 在移动应用开发中&#xff0c;动态引导动画一直是提升用户体验的关键元素。从早期的帧动画到后来的Lottie、SVGA等方案&#xff0c;开发者们不断寻求更高效、更灵活的动画实现方式。然而&…...

编程新知 2026/4/2 20:40:13

腾讯云端Openclaw+飞书 多机器人配置全攻略（新手友好版）

前言&#xff1a;随着AI自动化工具的普及&#xff0c;Openclaw凭借强大的自主执行能力&#xff0c;成为很多人提升效率的首选&#xff1b;而飞书作为高效协同工具&#xff0c;其机器人功能可无缝融入日常工作流。当两者结合&#xff0c;配置多机器人实现分工协作&#xff08;如…...

编程新知 2026/4/2 20:22:02

STM32F407实战：用CubeMX+FreeRTOS+SDIO+FatFs，5分钟搞定SD卡文件读写

STM32F407实战&#xff1a;5分钟极速实现SD卡文件系统全流程 拿到一块STM32F407开发板时&#xff0c;如何快速验证SD卡文件读写功能&#xff1f;这套组合方案或许能帮你省下大量调试时间——CubeMX生成基础框架、FreeRTOS管理任务调度、SDIO硬件接口驱动配合FatFs文件系统&…...

编程新知 2026/4/2 19:47:46