流星似乎是这些小颤抖在寒冷的夜空中闪烁时产生的温暖的闪烁迹象。流星效果是黑暗主题网站最独特的背景效果之一。流星动画是一个加载屏幕的绝佳示例，它可以在加载网站上的其余材料时长时间吸引您的注意力。这种效果可以在页面加载器和用户界面中利用。
在这篇文章中，我们将讨论使用CSS创建流星动画效果的方法。为此，我们将使用 CSS 的各种属性，如动画、溢出、过滤器、变换、第 n 个子属性、:before 和 :after 伪选择器。
应遵循的步骤
以下是创建流星动画效果的步骤 –
第 1 步 – 使用 HTML 创建星星的基本设计。为天空创建一个部分元素，为星星创建九个
元素。
第 2 步 – 要使星星以 45 度方向掉落，请使用剖面元素的变换属性。
第 3 步 – 根据您的要求对齐 p 元素。
第 4 步 – 使用位置和填充属性等属性制作环形球。要赋予它们圆形形状，请使用边框半径属性。
步骤 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 的动画属性允许我们在一定的时间间隔内更改元素的各种样式属性，从而赋予其动画效果。
@keyframes 用于准确指定在给定持续时间内动画中发生的情况。这是通过在动画期间声明某些特定“帧”的 CSS 属性来完成的，百分比从 0%（动画开始）到 100%（动画结束）。
过滤属性
它使开发人员能够向 HTML 元素添加不透明度、模糊和饱和度等视觉效果。
语法
filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();
背景 – 它使我们能够在背景中向 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 创建流星效果。由于网页设计已显着改进，在线动画是网站建设者用来吸引更多观众的重要工具。大多数人都试图更频繁地使用它，不仅仅是为了填充页面，还为了展示应该如何阅读页面。动画用于显示表单错误、点击位置、增加转化率等等。
动画经常吸引用户的注意力，这就是使用它们的原因。此外，动画可用于在内容加载时转移用户的注意力，给人一种加载速度更快的印象，并让他们立即观察移动或进度。
以上就是如何使用CSS创建流星动画效果？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用CSS创建流星动画效果？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
