【今日文章】：如何用css 实现星空效果
【今日文章】：如何用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>
tips:
父亲display:flex；子元素margin:auto。
这个时候能上下左右居中的原理是，margin:auto能填满子元素到父元素上下左右的距离。
如果是margin-left:auto，那是子元素填满子元素左侧到父元素的距离。
相关文章：
【今日文章】：如何用css 实现星空效果
【今日文章】：如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求： 屏幕上有“星星”，且向上移动。移动的时候，动画效果要连贯，不能出现闪一下的样子。 实现 这里我们需要知道，“星星”是…...
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译文：Web、云、定制应用程序、AWS、AWS、侦察、网站…...
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…...
某综合性能源集团绩效考核设计项目纪实
——设置分层分类的考核指标、建立多维度评价体系，增加考核结果信服力 【客户行业】能源行业 【问题类型】薪酬管理 【客户背景】 某综合性能源跨国集团是一家专注于能源加工行业的民营跨国企业，业务覆盖能源工程建设、高端装备制造、能源勘探开发、专…...
ubuntu18.04 通过创建服务实现开机自启, 启动指定脚本
下面是具体的操作过程 切换目录到root cd /root/ 新建一个脚本 vi myscript.sh 添加内容：设置指定网卡的ip地址 (这里根据自己需要修改) #!/bin/bash ifconfig enp0s3 10.20.60.113 赋予执行权限 chmod x myscript.sh 新建一个服务 vi /etc/systemd/system/myscr…...
Tomcat 9.0.x 源码编译
文章目录 一、克隆源码二、构建 Maven1）在项目根目录中新建 pom.xml 文件2）然后 Add Maven Projects 三、在目录中增加 home 目录四、增加启动配置五、其它问题1）控制台乱码解决 2）启动后访问 localhost:8080 报错解决 一、克隆源…...
基于SSM的旅游管理系统的设计与实现
末尾获取源码 开发语言：Java Java开发工具：JDK1.8 后端框架：SSM 前端：采用JSP技术开发 数据库：MySQL5.7和Navicat管理工具结合 服务器：Tomcat8.5 开发软件：IDEA / Eclipse 是否Maven项目&#x…...
多目标优化中的“latent action”是什么？
2020 NeurIPS 中的“latent action”： 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代表一个边界（分类器）&…...
上海亚商投顾：三大指数小幅下跌 CPO、算力板块集体爆发
上海亚商投顾前言：无惧大盘涨跌，解密龙虎榜资金，跟踪一线游资和机构资金动向，识别短期热点和强势个股。 一.市场情绪 沪指早间低开后震荡，午后一度拉升翻红，创业板指盘中跌近1%，随后探底回升跌…...
【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…...
制作吉他谱软件Guitar Pro8中文版本
前面提到了使用Guitar Pro制作吉他谱的步骤，除此以外，在最新的Guitar Pro 8版本中，还新增了制作简谱的功能。 在窗口右侧的乐谱中，选择简谱按钮，可以打开乐谱的简谱编辑模式。 Guitar Pro-Guitar Pro 8 win-安装包ht…...
SpringBoot整合JUnit
1.创建新项目 说明：创建springboot_04_junit项目，选择对应的版本。 2.接口类 说明：新建BookDao接口。 package com.forever.dao;public interface BookDao {public void save(); }3.实现类 说明： 新建BookDaoImpl实现类。 pa…...
华为取消6000万订单影响在扩大，高通嘴硬强调不受影响
高通公布了2023年第三季度的业绩，业绩显示营收下滑24%，净利润下滑36%，不过高通强调预计今年四季度业绩将回升，意思是说华为取消订单带来的影响较小。 一、高通处境不利已延续4年时间 2019年美国对华为采取措施，众多中国…...
培训心得怎么写？CHAT帮你解决问题
问CHAT：请写一篇入职教师的培训心得 CHAT回复：作为一名新入职的教师，我非常感谢学校给予的这次培训机会。此次培训让我收获颇丰，无论是在教学理念、教学技巧上，还是在如何与学生、家长建立良好关系方面，都有…...
AJAX-解决回调函数地狱问题
一、同步代码和异步代码 1.同步代码 浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作，在上一行完成之后才会执行下一行。这也使得它成为一个同步程序。 总结来说：逐行执行，需原地等待结果后࿰…...
【Mac开发环境搭建】JDK安装、多JDK安装与切换
文章目录 JDK下载与安装下载安装 配置环境变量安装多个JDK共存 JDK下载与安装 下载 Oracle官网提供了非常多个版本的JDK供下载，可以点击如下链接重定向到JDK下载页面 ORACLE官网JDK下载 安装 下面的官方文档可以点开收藏到浏览器的收藏夹，这样后续在开…...
C,C++,JAVA的区别与联系
C、C和Java是三种常见的编程语言，它们有一些区别和联系。 区别： 1. 语言类型：C是一种过程式编程语言，C是在C的基础上发展而来的面向对象编程语言，而Java是一种面向对象编程语言。 2. 语法：C语言相对较为…...
界面控件DevExpress WPF PDF Viewer，更快实现应用的PDF文档浏览
DevExpress WPF PDF Viewer控件可以轻松地直接在Windows应用程序中显示PDF文档，而无需在最终用户的机器上安装外部PDF查看器。 P.S：DevExpress WPF拥有120个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress…...
nanodet训练自己的数据集、NCNN部署到Android
nanodet训练自己的数据集、NCNN部署到Android 一、介绍二、训练自己的数据集1. 运行环境2. 数据集3. 配置文件4. 训练5. 训练可视化6. 测试 三、部署到android1. 使用官方权重文件部署1.1 下载权重文件1.2 使用Android Studio部署apk 2. 部署自己的模型【暂时存在问题】2.1 生成…...
含泪整理的超全窗口函数：数据开发必备
最近在搞一些面试和课程答辩的时候，问什么是窗口函数，知道哪些窗口函数?最多的答案就是row_number、rank、dense_rank，在问一下还有其他的吗？这时同学就蒙了,还有其他的窗口函数？其实上面的回答也只是专用窗口函数&am…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
docker 部署发现spring.profiles.active 问题
报错： org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...