数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 创建流星动画效果？
流星似乎是这些细小的碎片在寒冷的夜空中闪烁时产生的热量的闪亮迹象。流星效果是深色主题网站最独特的效果之一。流星动画是一个极好的加载屏幕示例，它可以在网站上的其余内容加载时长时间吸引您的注意力。此效果可用于页面加载器和用户界面。
在本文中，我们将讨论使用 CSS 创建流星动画效果的方法。为此，我们将使用 CSS 的各种属性，如动画、溢出、过滤器、变换、第 n 个子元素属性、:before 和 :after 伪选择器。
操作步骤
以下是创建流星动画效果的操作步骤：
步骤 1 − 使用 HTML 创建星星的基本设计。为天空创建一个 section 元素，并为星星创建九个 <p> 元素。
步骤 2 − 为了使星星以 45 度角的方向落下，请对 section 元素使用 transform 属性。
步骤 3 − 根据您的需要对齐 p 元素。
步骤 4 − 使用 position 和 filler 属性创建圆形球体。要使其呈圆形，请使用 border-radius 属性。
步骤 5 − 使用 :before 和 :after 伪选择器，为星星分配前后效果。
步骤 6 − 使用第 n 个子元素属性，为星星添加动画效果。指定每个第 n 个子元素的位置。
步骤 7 − 使用 @keyframes，指定星星头部和尾部的宽度。使用 @-webkit-keyframes 创建射击效果。
使用的属性
我们使用了以下 CSS 属性：
:nth-child(n) 选择器
:nth-child(n) 是一个 CSS 伪类选择器，用于根据元素在其同级元素组中的位置来匹配元素。它匹配所有作为第 n 个子元素的元素。n 可以是数字、关键字或任何公式。
语法
element :nth-child(n){
Css declarations;
}
括号中的参数“n”表示选择或匹配元素的模式。它可能是奇数或偶数函数表示法。
奇数值表示在序列中位置为奇数的项目，例如 1、3、5 等。类似地，偶数值表示在序列中位置为偶数的项目，例如 2、4、6 等。
CSS 动画
CSS 的 animation 属性允许我们在特定时间间隔内更改元素的各种样式属性，从而使其产生动画效果。
@keyframes 用于在给定时间范围内精确指定动画中发生的情况。这是通过在动画期间为某些特定“帧”声明 CSS 属性来完成的，其百分比从 0%（动画开始）到 100%（动画结束）。
Filter 属性
它使开发人员能够为 HTML 元素添加视觉效果，如不透明度、模糊和饱和度。
语法
filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();
Background − 它使我们能够为 HTML 元素的背景添加视觉效果。
Box-shadow − 它使我们能够为 HTML 元素添加阴影。
Transform − 此属性使我们能够为元素添加 2D 或 3D 变换。它允许您变换、旋转、缩放、移动、倾斜等元素。
示例
<!DOCTYPE html>
<html>
<head>
<title> Shooting Star Animation Effect </title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow: hidden;
}
div{
position: absolute;
top: 0;
left: 0;
background: #000;
background-position-x: center;
background-size: cover;
width: 100%;
height: 100vh;
animation: background 68s linear infinite;
}
@keyframes background {
0%{ transform:scale(1);}
55%{ transform:scale(1.3);}
100%{ transform: scale(1);}
}
span{
position: absolute;
left: 50%;
top: 45%;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
animation: anim 3s ease-in-out infinite;
}
span::before{
content: '';
width: 290px;
height: 2px;
position: absolute;
top: 53%;
transform: translateY(-45%);
background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
}
@keyframes anim {
0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
40%{ opacity: 0.8; }
70%{ opacity: 1; }
100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
}
span:nth-child(1){
top: 0;
right: 0;
left: inherit;
animation-delay: 0 ;
animation-duration: 1s;
}
span:nth-child(2){
top: 0;
right: 70px;
left: inherit;
animation-delay: 0.3s;
animation-duration: 4s;
}
span:nth-child(3){
top: 70px;
right: 0px;
left: inherit;
animation-delay: 0.3s ;
animation-duration: 3s;
}
span:nth-child(4){
top: 0;
right: 170px;
left: initial;
animation-delay: 0.7s;
animation-duration: 3s;
}
</style>
</head>
<body>
<div>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
</body>
</html>
结论
在本文中，我们了解了如何使用 CSS 创建流星效果。随着网页设计得到显著改进，在线动画已成为网站构建者吸引更多访问者的重要工具。现在大多数人都试图更频繁地使用它，不仅是为了填充页面，还为了展示页面应该如何阅读。动画用于显示表单错误、点击位置、提高转化率等等。
动画通常会吸引用户的注意力，这就是它们被使用的原因。此外，动画可用于在内容加载时转移用户注意力，使其看起来加载速度更快，并让他们立即观察到运动或进度。
2K+ 浏览量
