2. 程式人生 > >css3動畫loading樣式

css3動畫loading樣式

阿新 • • 發佈：2018-01-28
hit mes 1.7 orm top style ram 兼容 alt

演示結果：

　　技術分享圖片

css樣式：　　　

<style type="text/css">
body{
position: relative;
height: 900px;
}
.cssload-wrap {
position: absolute;
margin: 0 auto 0;
left: 50%;
top:50%;
margin-left: -218px;
transform: rotateX(75deg);
}
.cssload-circle {
position: absolute;
float: left;


border: 1px solid white;
animation: bounce 1.73s infinite ease-in-out alternate;
-o-animation: bounce 1.73s infinite ease-in-out alternate;
-ms-animation: bounce 1.73s infinite ease-in-out alternate;
-webkit-animation: bounce 1.73s infinite ease-in-out alternate;
-moz-animation: bounce 1.73s infinite ease-in-out alternate;

border-radius: 100%;
background: transparent;
top: -73px;
left: -73px;
}
.cssload-circle:nth-child(1) {
margin: 0 288px;
width: 10px;
height: 10px;
animation-delay: 115ms;
-o-animation-delay: 115ms;
-ms-animation-delay: 115ms;
-webkit-animation-delay: 115ms;
-moz-animation-delay: 115ms;

z-index: -1;
border: 1px solid rgba(255,43,0,0.7);
}
.cssload-circle:nth-child(2) {
margin: 0 283px;
width: 19px;
height: 19px;
animation-delay: 230ms;
-o-animation-delay: 230ms;
-ms-animation-delay: 230ms;
-webkit-animation-delay: 230ms;
-moz-animation-delay: 230ms;
z-index: -2;
border: 1px solid rgba(255,85,0,0.7);
}
.cssload-circle:nth-child(3) {
margin: 0 278px;
width: 29px;
height: 29px;
animation-delay: 345ms;
-o-animation-delay: 345ms;
-ms-animation-delay: 345ms;
-webkit-animation-delay: 345ms;
-moz-animation-delay: 345ms;
z-index: -3;
border: 1px solid rgba(255,128,0,0.7);
}
.cssload-circle:nth-child(4) {
margin: 0 273px;
width: 39px;
height: 39px;
animation-delay: 460ms;
-o-animation-delay: 460ms;
-ms-animation-delay: 460ms;
-webkit-animation-delay: 460ms;
-moz-animation-delay: 460ms;
z-index: -4;
border: 1px solid rgba(255,170,0,0.7);
}
.cssload-circle:nth-child(5) {
margin: 0 268px;
width: 49px;
height: 49px;
animation-delay: 575ms;
-o-animation-delay: 575ms;
-ms-animation-delay: 575ms;
-webkit-animation-delay: 575ms;
-moz-animation-delay: 575ms;
z-index: -5;
border: 1px solid rgba(255,213,0,0.7);
}
.cssload-circle:nth-child(6) {
margin: 0 263px;
width: 58px;
height: 58px;
animation-delay: 690ms;
-o-animation-delay: 690ms;
-ms-animation-delay: 690ms;
-webkit-animation-delay: 690ms;
-moz-animation-delay: 690ms;
z-index: -6;
border: 1px solid rgba(255,255,0,0.7);
}
.cssload-circle:nth-child(7) {
margin: 0 258px;
width: 68px;
height: 68px;
animation-delay: 805ms;
-o-animation-delay: 805ms;
-ms-animation-delay: 805ms;
-webkit-animation-delay: 805ms;
-moz-animation-delay: 805ms;
z-index: -7;
border: 1px solid rgba(212,255,0,0.7);
}
.cssload-circle:nth-child(8) {
margin: 0 253px;
width: 78px;
height: 78px;
animation-delay: 920ms;
-o-animation-delay: 920ms;
-ms-animation-delay: 920ms;
-webkit-animation-delay: 920ms;
-moz-animation-delay: 920ms;
z-index: -8;
border: 1px solid rgba(170,255,0,0.7);
}
.cssload-circle:nth-child(9) {
margin: 0 249px;
width: 88px;
height: 88px;
animation-delay: 1035ms;
-o-animation-delay: 1035ms;
-ms-animation-delay: 1035ms;
-webkit-animation-delay: 1035ms;
-moz-animation-delay: 1035ms;
z-index: -9;
border: 1px solid rgba(128,255,0,0.7);
}
.cssload-circle:nth-child(10) {
margin: 0 244px;
width: 97px;
height: 97px;
animation-delay: 1150ms;
-o-animation-delay: 1150ms;
-ms-animation-delay: 1150ms;
-webkit-animation-delay: 1150ms;
-moz-animation-delay: 1150ms;
z-index: -10;
border: 1px solid rgba(85,255,0,0.7);
}
.cssload-circle:nth-child(11) {
margin: 0 239px;
width: 107px;
height: 107px;
animation-delay: 1265ms;
-o-animation-delay: 1265ms;
-ms-animation-delay: 1265ms;
-webkit-animation-delay: 1265ms;
-moz-animation-delay: 1265ms;
z-index: -11;
border: 1px solid rgba(43,255,0,0.7);
}
.cssload-circle:nth-child(12) {
margin: 0 234px;
width: 117px;
height: 117px;
animation-delay: 1380ms;
-o-animation-delay: 1380ms;
-ms-animation-delay: 1380ms;
-webkit-animation-delay: 1380ms;
-moz-animation-delay: 1380ms;
z-index: -12;
border: 1px solid rgba(0,255,0,0.7);
}
.cssload-circle:nth-child(13) {
margin: 0 229px;
width: 127px;
height: 127px;
animation-delay: 1495ms;
-o-animation-delay: 1495ms;
-ms-animation-delay: 1495ms;
-webkit-animation-delay: 1495ms;
-moz-animation-delay: 1495ms;
z-index: -13;
border: 1px solid rgba(0,255,43,0.7);
}
.cssload-circle:nth-child(14) {
margin: 0 224px;
width: 136px;
height: 136px;
animation-delay: 1610ms;
-o-animation-delay: 1610ms;
-ms-animation-delay: 1610ms;
-webkit-animation-delay: 1610ms;
-moz-animation-delay: 1610ms;
z-index: -14;
border: 1px solid rgba(0,255,85,0.7);
}
.cssload-circle:nth-child(15) {
margin: 0 219px;
width: 146px;
height: 146px;
animation-delay: 1725ms;
-o-animation-delay: 1725ms;
-ms-animation-delay: 1725ms;
-webkit-animation-delay: 1725ms;
-moz-animation-delay: 1725ms;
z-index: -15;
border: 1px solid rgba(0,255,128,0.7);
}
.cssload-circle:nth-child(16) {
margin: 0 214px;
width: 156px;
height: 156px;
animation-delay: 1840ms;
-o-animation-delay: 1840ms;
-ms-animation-delay: 1840ms;
-webkit-animation-delay: 1840ms;
-moz-animation-delay: 1840ms;
z-index: -16;
border: 1px solid rgba(0,255,170,0.7);
}
.cssload-circle:nth-child(17) {
margin: 0 210px;
width: 166px;
height: 166px;
animation-delay: 1955ms;
-o-animation-delay: 1955ms;
-ms-animation-delay: 1955ms;
-webkit-animation-delay: 1955ms;
-moz-animation-delay: 1955ms;
z-index: -17;
border: 1px solid rgba(0, 255, 213, 0.7);
}
.cssload-circle:nth-child(18) {
margin: 0 205px;
width: 175px;
height: 175px;
animation-delay: 2070ms;
-o-animation-delay: 2070ms;
-ms-animation-delay: 2070ms;
-webkit-animation-delay: 2070ms;
-moz-animation-delay: 2070ms;
z-index: -18;
border: 1px solid rgba(0, 255, 255, 0.7);
}
.cssload-circle:nth-child(19) {
margin: 0 200px;
width: 185px;
height: 185px;
animation-delay: 2185ms;
-o-animation-delay: 2185ms;
-ms-animation-delay: 2185ms;
-webkit-animation-delay: 2185ms;
-moz-animation-delay: 2185ms;
z-index: -19;
border: 1px solid rgba(0, 212, 255, 0.7);
}
.cssload-circle:nth-child(20) {
margin: 0 195px;
width: 195px;
height: 195px;
animation-delay: 2300ms;
-o-animation-delay: 2300ms;
-ms-animation-delay: 2300ms;
-webkit-animation-delay: 2300ms;
-moz-animation-delay: 2300ms;
z-index: -20;
border: 1px solid rgba(0, 170, 255, 0.7);
}
.cssload-circle:nth-child(21) {
margin: 0 190px;
width: 205px;
height: 205px;
animation-delay: 2415ms;
-o-animation-delay: 2415ms;
-ms-animation-delay: 2415ms;
-webkit-animation-delay: 2415ms;
-moz-animation-delay: 2415ms;
z-index: -21;
border: 1px solid rgba(0, 127, 255, 0.7);
}
.cssload-circle:nth-child(22) {
margin: 0 185px;
width: 214px;
height: 214px;
animation-delay: 2530ms;
-o-animation-delay: 2530ms;
-ms-animation-delay: 2530ms;
-webkit-animation-delay: 2530ms;
-moz-animation-delay: 2530ms;
z-index: -22;
border: 1px solid rgba(0, 85, 255, 0.7);
}
.cssload-circle:nth-child(23) {
margin: 0 180px;
width: 224px;
height: 224px;
animation-delay: 2645ms;
-o-animation-delay: 2645ms;
-ms-animation-delay: 2645ms;
-webkit-animation-delay: 2645ms;
-moz-animation-delay: 2645ms;
z-index: -23;
border: 1px solid rgba(0, 43, 255, 0.7);
}
.cssload-circle:nth-child(24) {
margin: 0 175px;
width: 234px;
height: 234px;
animation-delay: 2760ms;
-o-animation-delay: 2760ms;
-ms-animation-delay: 2760ms;
-webkit-animation-delay: 2760ms;
-moz-animation-delay: 2760ms;
z-index: -24;
border: 1px solid rgba(0, 0, 255, 0.7);
}
.cssload-circle:nth-child(25) {
margin: 0 171px;
width: 244px;
height: 244px;
animation-delay: 2875ms;
-o-animation-delay: 2875ms;
-ms-animation-delay: 2875ms;
-webkit-animation-delay: 2875ms;
-moz-animation-delay: 2875ms;
z-index: -25;
border: 1px solid rgba(42, 0, 255, 0.7);
}
.cssload-circle:nth-child(26) {
margin: 0 166px;
width: 253px;
height: 253px;
animation-delay: 2990ms;
-o-animation-delay: 2990ms;
-ms-animation-delay: 2990ms;
-webkit-animation-delay: 2990ms;
-moz-animation-delay: 2990ms;
z-index: -26;
border: 1px solid rgba(85, 0, 255, 0.7);
}
.cssload-circle:nth-child(27) {
margin: 0 161px;
width: 263px;
height: 263px;
animation-delay: 3105ms;
-o-animation-delay: 3105ms;
-ms-animation-delay: 3105ms;
-webkit-animation-delay: 3105ms;
-moz-animation-delay: 3105ms;
z-index: -27;
border: 1px solid rgba(127, 0, 255, 0.7);
}
.cssload-circle:nth-child(28) {
margin: 0 156px;
width: 273px;
height: 273px;
animation-delay: 3220ms;
-o-animation-delay: 3220ms;
-ms-animation-delay: 3220ms;
-webkit-animation-delay: 3220ms;
-moz-animation-delay: 3220ms;
z-index: -28;
border: 1px solid rgba(170, 0, 255, 0.7);
}
.cssload-circle:nth-child(29) {
margin: 0 151px;
width: 283px;
height: 283px;
animation-delay: 3335ms;
-o-animation-delay: 3335ms;
-ms-animation-delay: 3335ms;
-webkit-animation-delay: 3335ms;
-moz-animation-delay: 3335ms;
z-index: -29;
border: 1px solid rgba(212, 0, 255, 0.7);
}
.cssload-circle:nth-child(30) {
margin: 0 146px;
width: 292px;
height: 292px;
animation-delay: 3450ms;
-o-animation-delay: 3450ms;
-ms-animation-delay: 3450ms;
-webkit-animation-delay: 3450ms;
-moz-animation-delay: 3450ms;
z-index: -30;
border: 1px solid rgba(255, 0, 255, 0.7);
}


@keyframes bounce {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(97px);
}
}

@-o-keyframes bounce {
0% {
-o-transform: translateY(0px);
}
100% {
-o-transform: translateY(97px);
}
}

@-ms-keyframes bounce {
0% {
-ms-transform: translateY(0px);
}
100% {
-ms-transform: translateY(97px);
}
}

@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(97px);
}
}

@-moz-keyframes bounce {
0% {
-moz-transform: translateY(0px);
}
100% {
-moz-transform: translateY(97px);
}
}
</style>

html代碼：　

<div class="cssload-wrap">
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
　　<div class="cssload-circle"></div>
</div>

　　　　

註：兼容IE10以上的瀏覽器

css3動畫loading樣式

相關推薦

css3動畫loading樣式

hit mes 1.7 orm top style ram 兼容 alt 演示結果： 　　 css樣式：　　　 <style type="text/css"> body{ position: relative; height: 900px;

CSS3實現Loading動畫特效

搜狗 tran color orm for ima utf pad body 查看效果：http://hovertree.com/texiao/css3/43/代碼如下： <!DOCTYPE html> <html> <head>

常見的css3動畫樣式

mod 動畫播放 速度 ack alter one min 發生 java 6、3D轉換 屬性: perspective : 設置假定人眼到投影平面的距離 只影響3D元素，不影響2D元素 設置位置：加在父元素上，設置好後，其子

CSS3 實現loading動畫效果

https://www.jianshu.com/p/55372466ce70   前幾篇介紹了CSS3的3個動畫屬性transform，transition，animation。但即使基本語法能看懂，也不代表能設計出棒棒的動畫效果。在設計這條路上，是學無止境，甚至需要拼天賦的。我也

css3動畫小試

-i over round bsp css3 spa width -s pan #blue_check_td{ 　　margin: 0 auto 0 auto; 　　text-align: center; } .blue_check_div{ 　　posi

css3高級樣式

顯示 dff select 循環 run 移動 圓心 otto 高度 ---------文字描邊/填充 text-stroke: --px color; 描邊寬度 顏色 text-fill-color: color; 填充顏色 ---------文字模糊/陰影 text-s

初識css3動畫

absolute position border center hidden <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>動畫初識<

CSS3動畫（二）：波浪效果

col -1 loading ack css代碼 code load width ase 實現效果 如圖所示： 首先得準備三張圖，一張是淺黃色的背景圖loading_bg.png，一張是深紅色的圖loading.png，最後一張為bolang.png。 css代碼

css3動畫

direct 毫秒 過程 lin 速度 duration out tor 過渡效果 過度transition 成為另外一種樣式的一個逐漸過程 transition-property規定過度css屬性名稱 值：none|all|property transition-dura

[CSS3] 動畫暗角按鈕

tran acc html flow art ase add pla oat <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

QQ音樂頁面css3動畫的應用

content top none ash tran san apt bmi qq音樂 <!DOCTYPE html> <!-- saved from url=(0036)http://y.qq.com/vip/promote_yearvip/ -->

1.getelenmentbyid 2.換class類 css3動畫控制

doctype height body sna pause anim over parent -c 1.對於border-color這樣的樣式，document.getElementById(‘demo‘).style.borderColor=‘red‘;帶橫線的連起來去掉

css3動畫簡介以及動畫庫animate.css的使用

谷歌瀏覽器 ie瀏覽器 transition 工程師 火狐瀏覽器 在這個年代，你要是不懂一點點css3的知識，你都不好意思說你是個美工。美你妹啊，請叫我前端工程師好不好。呃。。好吧，攻城屍。。。呵呵，作為一個攻城屍，沒有點高端大氣上檔次的東西怎麽能行呢，那麽css3的動畫就絕

解決CSS3多列樣式column-width布局時內容被截斷、錯亂

hive css3多列 none 技術分享 技術 ive cor title log 一、問題 使用CSS3的column-width: auto | <length>屬性時，出現排列的內容被截斷，出現錯位的現象。 二、原因 需要為圖片容器設置高度，不

css3動畫曲線運動

bsp box div char right round mes col eight <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css3動畫詳解

gin char ng- pack mar ber 正在 one title 一.Keyframes介紹： Keyframes被稱為關鍵幀，[email protected]/* */rames”開頭，後面緊跟著是動畫名稱加上一對花括號“{…}”，括號中就是一些

css3動畫效果：1基礎

prop 包含 rop lin tex color 變換 百分比 css屬性 css動畫分兩種：過渡效果transition 、關鍵幀動畫keyframes 一、過渡效果transition 需觸發一個事件（如hover、click）時，才改變其css屬性。 過渡效果通常在

css3動畫效果

rds 數值 耗時 無限 mil 動畫效果 for 函數 rect 添加動畫效果： 1 animation-name：指定動畫名稱 2.animation-duration：設置動畫的總耗時 3.animation-duration：設置的動畫的播放次數，默認為1次，可以指

css3動畫transition詳解

逗號 一點 作用 發生 延續 outline css3 浮點型 漸變 transition主要包含四個屬性值：執行變換的屬性：transition-property,變換延續的時間：transition-duration,在延續時間段，變換的速率變化transition-t

貝塞爾曲線與CSS3動畫、SVG和canvas的應用

document cnblogs blank otto style 函數 alt one absolut 簡介 貝塞爾曲線是可以做出很多復雜的效果來的，比如彈跳球的復雜動畫效果，首先加速下降，停止，然後彈起時逐漸減速的效果。 使用貝塞爾曲線常用的兩個網址如下： 緩動函