首頁

JS特效

CSS3特效

CSS3球狀網(wǎng)頁加載動畫圖標特效

立即下載預覽

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

.loader {
? 背景: 線性漸變(向右, rgb(22, 113, 202) 50%, 透明 50%);
? 動畫：旋轉 1s 無限線性；
}
.loader:在{
之前 ? 顯示：塊；
? 內(nèi)容： '';＃＃＃ ? 位置：相對；
? 頂部：50%；
? 左：50%；
? 變換：翻譯(-50%, -50%);
? 寬度：90px；
? 高度：90 像素；
? 背景：#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 秒輕松無限；
}
@關鍵幀推出{
? ? 0% {
# ? ? 不透明度：1；
? ? 變換：translateX(0px) 旋轉(0deg);
? }
? 100% {
# ? ? 不透明度：0；
? ? 變換：translateX(100%) 旋轉(120deg);
? }
}
</風格>

</頭>