首頁

JS特效

CSS3特效

CSS3球狀網頁載入動畫圖示特效

現在下載預覽

<頭>
<元字符集=“utf-8”>
CSS3球狀網頁載入動畫圖示效果
<風格>
*, *:前, *:之後 {
框大小：邊框框；
邊距：0；
填充：0;
}
：根，html，內文{
字型系列：'Poiret One'、'Open Sans'、'Helvetica Neue'、'Helvetica'、'Arial'、sans-serif;
背景：#222;
白顏色;＃＃＃ }
h1 {
文字對齊：居中；
邊距：1rem 自動 2rem;
字體粗細：正常;
}
p {
# 保證金：1rem;
}
。排 {＃＃＃寬度：80%；
高度：150px；
邊距：2rem 自動；
}
。細胞 {＃＃＃顯示：內聯區塊；
寬度：49%；
文字對齊：居中；
}
。圓 {＃＃＃顯示：內聯區塊；
寬度：100px；
高度：100px；
邊界半徑：50%；
背景：白色煙霧；
框陰影：4px -40px 60px 5px rgb(26, 117, 206) 圖解;
}
。正方形 {＃＃＃顯示：內聯區塊；
寬度：100px；
高度：100px；
邊框半徑：20px；
背景：白色煙霧；
框陰影：4px -40px 60px 5px rgb(26, 117, 206) 圖解;
}

.loader {
背景: 線性漸層(向右, rgb(22, 113, 202) 50%, 透明 50%);
動畫：旋轉 1s 無限線性；
}
.loader:在{
之前顯示：塊；
內容： '';＃＃＃位置：相對；
頂部：50%；
左：50%；
變換：翻譯(-50%, -50%);
寬度：90px；
高度：90px；
背景：#222;
邊界半徑：50%；
}

。明膠 {＃＃＃動畫：明膠0.5s無限；
}
@keyframes明膠{
從, 到 { 變換: 縮放(1, 1); }
25% { 變換：縮放（0.9，1.1）； }
50% { 變換：縮放（1.1，0.9）； }
75% { 變換：縮放（0.95，1.05）； }
}

。旋轉 {＃＃＃動畫：旋轉 1s 無限線性；
}
@關鍵影格旋轉{
來自 { 變換：旋轉（0deg）； }
到 { 變換：旋轉（360deg）； }
}

.彈性旋轉{
動畫：elastic-spin 1s 無限輕鬆；
}
@keyframes 彈性旋轉 {
來自 { 變換：旋轉（0deg）； }
到 { 變換：旋轉（720deg）； }
}

.脈衝{
動畫：脈衝 1 秒無限緩入緩出交替；
}
@關鍵幀脈衝{
來自 { 變換：比例（0.8）； }
到 { 變換：縮放（1.2）； }
}

。閃光 {＃＃＃動畫：閃爍 500ms 緩和無限交替；
}
@關鍵影格閃光{
來自 { 不透明度：1; }
到 { 不透明度：0; }
}

。你好呀 {＃＃＃動畫：這裡 1s 輕鬆無限;
}
@這裡的關鍵影格{
30% { 變換：縮放（1.2）； }
40%, 60% { 變換: 旋轉(-20deg) 縮放(1.2); }
50% { 變換：旋轉（20deg）縮放（1.2）; }
70% { 變換：旋轉（0deg）縮放（1.2）; }
100% { 變換：縮放（1）； }
}

。生長 {＃＃＃動畫：成長 2s 輕鬆無限;
}
@關鍵影格增長{
來自 { 變換：比例（0）； }
到 { 變換：縮放（1）； }
}

。淡入 {＃＃＃動畫：淡入 2s 線性無限；
}
@關鍵影格淡入{
來自{ 不透明度：0; }
至 { 不透明度：1; }
}

。消退 {＃＃＃動畫：淡出 2s 線性無限;
}
@關鍵影格淡出{
來自 { 不透明度：1; }
到 { 不透明度：0; }
}

.bounce {
動畫：反彈 2s 緩和無限；
}
@關鍵影格反彈{
70% { 變換:translateY(0%); }
80% { 變換:translateY(-15%); }
90% { 變換:translateY(0%); }
95% { 變換:translateY(-7%); }
97% { 變換:translateY(0%); }
99% { 變換:translateY(-3%); }
100% { 變換:translateY(0); }
}

.bounce2 {
動畫：bounce2 2s 輕鬆無限；
}
@關鍵影格反彈2 {
0%、20%、50%、80%、100% {變換：translateY(0);}
40% {變換：translateY(-30px);}

# 60% {變換：translateY(-15px);}

# }

.搖動{
動畫：搖動2秒輕鬆無限;
}
@關鍵影格搖動{
0%, 100% {變換：translateX(0);}

# 10%、30%、50%、70%、90% {變換：translateX(-10px);}
20%、40%、60%、80% {變換：translateX(10px);}
}

。翻動 {＃＃＃背面可見性：可見！重要;
動畫：翻轉 2s 輕鬆無限;
}
@關鍵影格翻轉{
0% {
# 變換：透視（400px）旋轉Y（0）;
動畫計時功能：ease-out；
}
40% {
# 變換：透視（400px）translateZ（150px）rotateY（170deg）;
動畫計時功能：ease-out；
}
50% {
# 變換：透視（400px）translateZ（150px）rotateY（190deg）scale（1）;
動畫計時功能：ease-in;
}
80% {
# 變換：透視（400px）旋轉Y（360deg）縮放（.95）;
動畫計時功能：ease-in;
}
100% {
# 變換：透視（400px）縮放（1）；
動畫計時功能：ease-in;
}
}

。搖擺 {＃＃＃變換原點：頂部中心；
動畫：搖擺 2s 輕鬆無限;
}
@關鍵影格擺動{
20% { 變換：旋轉（15 度）； }
40% { 變換：旋轉(-10deg); }
60% { 變換：旋轉（5deg）； }
80% { 變換：旋轉(-5deg); }
100% { 變換：旋轉（0deg）； }
}

.擺動{
動畫：擺動 2s 輕鬆無限;
}
@關鍵影格擺動{
0% { 變換：translateX(0%); }
15% { 變換：translateX(-25%) 旋轉(-5deg); }
30% { 變換：translateX(20%) 旋轉(3deg); }
45% { 變換：translateX(-15%) 旋轉(-3deg); }
60% { 變換：translateX(10%) 旋轉(2deg); }
75% { 變換：translateX(-5%) 旋轉(-1deg); }
100% { 變換：translateX(0%); }
}

.淡入淡出{
動畫：淡入 2s 緩動無限；
}
@關鍵影格淡入{
0% {
# 不透明度：0；
變換：translateY(-20px);
}
100% {
# 不透明度：1；
變換：translateY(0);
}
}

.淡入左{
動畫：淡入左 2s 緩動無限；
}
@關鍵影格向左淡入{
0% {
# 不透明度：0；
變換：translateX(-20px);
}
100% {
# 不透明度：1；
變換：translateX(0);
}
}

.淡出-向下 {
動畫：淡出-下 2s 輕鬆無限；
}
@關鍵影格淡出向下{
0% {
# 不透明度：1；
變換：translateY(0);
}
100% {
# 不透明度：0；
變換：translateY(20px);
}
}

.淡出右{
動畫：淡出右2秒輕鬆無限;
}
@關鍵影格右淡出{
0% {
# 不透明度：1；
變換：translateX(0);
}
100% {
# 不透明度：0；
變換：translateX(20px);
}
}

.bounce-in {
動畫：反彈 2 秒輕鬆無限;
}
@關鍵影格彈入{
0% {
# 不透明度：0；
變換：縮放(.3);
}
50% {
# 不透明度：1；
變換：比例（1.05）；
}
70% { 變換：縮放(.9); }
100% { 變換：縮放（1）； }
}

.bounce-in-right {
動畫：右彈跳 2 秒輕鬆無限；
}
@關鍵影格向右反彈{
0% {
#不透明度：0；
變換：translateX(2000px);
}
60% {
# 不透明度：1；
變換：translateX(-30px);
}
80% { 變換：translateX(10px); }
100% { 變換：translateX(0); }
}

.bounce-out {
動畫：反彈 2 秒輕鬆無限;
}
@關鍵影格跳出{
0% { 變換：縮放（1）； }
25% { 變換：縮放（.95）； }
50% {
# 不透明度：1；
變換：縮放（1.1）；
}
100% {
# 不透明度：0；
變換：縮放(.3);
}
}

.bounce-out-down {
動畫：bounce-out-down 2s 緩動無限;
}
@keyframes 彈跳向下 {
0% { 變換：translateY(0); }
20% {
# 不透明度：1；
變換：translateY(-20px);
}
100% {
# 不透明度：0；
變換：translateY(20px);
}
}

.向左下旋轉{
動畫：向左旋轉 2s 緩動無限;
}
@關鍵影格左下旋轉{
0% {
# 變換原點：左下；
變換：旋轉(-90deg);
不透明度：0；
}
100% {
# 變換原點：左下；
變換：旋轉(0);
不透明度：1；
}
}

.向左旋轉{
動畫：左上旋轉 2s 緩動無限；
}
@關鍵影格左上旋轉{
0% {
# 變換原點：左下；
變換：旋轉(90deg);
不透明度：0；
}
100% {
# 變換原點：左下；
變換：旋轉(0);
不透明度：1；
}
}

.鉸鏈{
動畫：鉸鏈 2s 輕鬆無限；
}
@keyframes鉸鏈{
0% { 變換：旋轉(0);變換原點：左上角；動畫計時功能：緩入緩出； }
20%, 60% { 變換: 旋轉(80deg);變換原點：左上角；動畫計時功能：緩入緩出； }
40% { 變換：旋轉(60deg);變換原點：左上角；動畫計時功能：緩入緩出； }
80% { 變換: 旋轉(60deg) 平移Y(0);不透明度：1；變換原點：左上角；動畫計時功能：緩入緩出； }
100% { 變換：translateY(700px);不透明度：0； }
}

.滾入{
動畫：滾入 2 秒輕鬆無限;
}
@關鍵影格滾入{
0% {
# 不透明度：0；
變換：translateX(-100%) 旋轉(-120deg);
}
100% {
# 不透明度：1；
變換：translateX(0px) 旋轉(0deg);
}
}

。推出 {＃＃＃動畫：推出 2 秒輕鬆無限;
}
@keyframes 推出 {
0% {
# 不透明度：1；
變換：translateX(0px) 旋轉(0deg);
}
100% {
# 不透明度：0；
變換：translateX(100%) 旋轉(120deg);
}
}
</風格>

</頭>

CSS 動畫

多款CSS3變換實現的網頁載入動畫代碼，CSS3球狀網頁載入動畫圖示特效。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展，網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用，可為網頁增添動感與視覺效果，提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例，幫助開發者更熟練地運用CSS3特效，提升網頁的使用者體驗。過渡效果（Transition）過渡效果是CSS3中最基本的特效之一，透過改變某個屬