資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
