CSS實(shí)現(xiàn)橫向粒子變動(dòng)加載動(dòng)畫
發(fā)布時(shí)間：2016-04-25 15:39:21 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS實(shí)現(xiàn)橫向粒子變動(dòng)加載動(dòng)畫的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了CSS實(shí)現(xiàn)橫向粒子變動(dòng)加載動(dòng)畫的對(duì)應(yīng)代碼，供大家參考，具體內(nèi)容如下
此處用到了CSS3動(dòng)畫animation屬性的animation-fill-mode屬性和animation-delay屬性。
● animation-fill-mode屬性規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見。
none：不改變默認(rèn)行為。
forwards：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。
backwards：在animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀
中定義）。
both： 向前和向后填充模式都被應(yīng)用。
● animation-delay屬性定義動(dòng)畫何時(shí)開始。該屬性允許負(fù)值，示例中延遲0.16s執(zhí)行動(dòng)畫。
CSS Code復(fù)制內(nèi)容到剪貼板
- #loader7:before,
- #loader7:after,
- #loader7 {
- border-radius: 50%;
- width: 2.5em;
- height: 2.5em;
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- -webkit-animation: load7 1.8s infinite ease-in-out;
- animation: load7 1.8s infinite ease-in-out;
- }
- #loader7 {
- margin: 60px 50px;
- float: left;
- font-size: 10px;
- position: relative;
- text-indent: -9999em;
- -webkit-animation-delay: 0.16s;
- animation-delay: 0.16s;
- }
- #loader7:before {
- left: -3.5em;
- }
- #loader7:after {
- left: 3.5em;
- -webkit-animation-delay: 0.32s;
- animation-delay: 0.32s;
- }
- #loader7:before,
- #loader7:after {
- content: '';
- position: absolute;
- top: 0;
- }
- @-webkit-keyframes load7 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 2.5em 0 -1.3em #000000;
- }
- 40% {
- box-shadow: 0 2.5em 0 0 #000000;
- }
- }
- @keyframes load7 {
- 0%,
- 80%,
- 100% {
- box-shadow: 0 2.5em 0 -1.3em #000000;
- }
- 40% {
- box-shadow: 0 2.5em 0 0 #000000;
- }
- }
以上就是本文的全部內(nèi)容，希望對(duì)大家學(xué)習(xí)CSS樣式進(jìn)行加載有所幫助。
相關(guān)文章
CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫
這篇文章主要介紹了CSS實(shí)現(xiàn)大小相同、顏色深淺不一的粒子旋轉(zhuǎn)加載動(dòng)畫的相關(guān)代碼，運(yùn)用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來的，感興趣的小伙伴2016-04-25
使用 CSS 構(gòu)建強(qiáng)大且酷炫的粒子動(dòng)畫效果
粒子動(dòng)畫就是頁面上存在大量的粒子構(gòu)建而成的動(dòng)畫。傳統(tǒng)的粒子動(dòng)畫主要由 Canvas、WebGL 實(shí)現(xiàn)，接下來通過本文給大家介紹使用 CSS 構(gòu)建強(qiáng)大且酷炫的粒子動(dòng)畫效果，感興趣的2022-08-09
