資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML & CSS 中的新擬態載入動畫
在本文中，我們將使用 **HTML** 和 **CSS** 建立一個新擬態載入動畫。載入動畫是常用的 UI 元素，用於指示正在進行的程序，例如載入內容或等待來自伺服器的資料。我們將使用新擬態設計技術為其增添現代氣息。
新擬態設計透過組合元素周圍的高光和陰影來呈現 3D 效果，使它們看起來像是凸出或凹陷到表面。
方法
讓我們逐步瞭解如何建立新擬態載入動畫。
設定 HTML 結構
我們將從編寫簡單的 HTML 結構開始。動畫將由一個 div 元素組成，我們將對其進行樣式設定以建立新擬態效果。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
為新擬態動畫新增 CSS
接下來，我們需要使用 CSS 為動畫設定樣式。關鍵在於以某種方式新增陰影，使元素看起來像是凸起或壓入背景。我們將使用 box-shadow 屬性來實現此效果。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
CSS 程式碼說明
- 使用 **Flexbox** 將主體水平和垂直居中。背景顏色設定為柔和的淺灰色 (#ecf0f3)，這是新擬態設計中常見的背景顏色。並且 div 使用 Flexbox 居中動畫。
- 新擬態設計中最重要的部分是 **box-shadow** 屬性。陰影以不同的強度和方向進行戰略性地放置。底部右側的深色陰影 (#b8b9be) 和頂部左側的淺色陰影 (#fff) 創造了凸起的 3D 元素的錯覺。
- 動畫屬性使用 **@keyframes** 應用旋轉。動畫使用 spin 關鍵幀無限旋轉，在 1.5 秒內旋轉 360 度。
- **.spinner::before** 建立一個模擬實際載入動畫的內部旋轉元素。它具有帶彩色頂部邊框 (#3498db) 的邊框，從而建立旋轉弧線效果。
示例
組合 HTML 和 CSS 程式碼後，我們可以獲得新擬態載入動畫的結果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neumorphism Loading Spinner</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
</style>
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
輸出
更新於: 2024年9月20日
82 次瀏覽
廣告