CSS3實現(xiàn)粒子旋轉伸縮加載動畫
發(fā)布時間:2016-04-22 14:28:19 作者:佚名
我要評論

這篇文章主要為大家詳細介紹了CSS3實現(xiàn)粒子旋轉伸縮加載動畫的相關代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文運用CSS3的旋轉Transform屬性和動畫的執(zhí)行百分比制作而成,很特別的CSS3實現(xiàn)粒子旋轉伸縮加載動畫,具體內容如下
CSS Code復制內容到剪貼板
- #loader6 {
- margin: 60px 50px;
- float: left;
- font-size: 90px;
- text-indent: -9999em;
- overflow: hidden;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- position: relative;
- -webkit-animation: load6 1.7s infinite ease;
- animation: load6 1.7s infinite ease;
- }
- @-webkit-keyframes load6 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 5%,
- 95% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 30% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
- -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
- -0.81em 0.21em 0 -0.477em #ff0000;
- }
- 55% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
- -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
- -0.57em -0.61em 0 -0.477em #ff0000;
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- }
- @keyframes load6 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 5%,
- 95% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- 30% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,
- -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,
- -0.81em 0.21em 0 -0.477em #ff0000;
- }
- 55% {
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,
- -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,
- -0.57em -0.61em 0 -0.477em #ff0000;
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,
- -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,
- -0.11em -0.83em 0 -0.477em #ff0000;
- }
- }
以上就是本文的全部內容,希望對大家學習CSS樣式編寫有所幫助,制作出更多精彩的加載動畫效果。
相關文章
- Web前端圖片加載的方式多種多樣,其所產生的HTTP請求也各異,這里我們就來列舉CSS控制前端圖片HTTP請求的各種情況示例,需要的朋友可以參考下2016-06-16
- 下面小編就為大家?guī)硪黄猚ss全屏背景圖片設置,django加載圖片路徑詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-01
純CSS3實現(xiàn)的綠色Loading加載動畫特效源碼
這是一款由純CSS3實現(xiàn)的綠色Loading加載動畫特效源碼,有多種loading樣式供用戶選擇,采用純css3實現(xiàn),沒有引入任何外部圖形元素2016-05-27jQuery+css3實現(xiàn)的點擊下載按鈕3D加載downlading進度特效源碼
是一段點擊下載按鈕后,當前下載圖標將進行3D翻轉,隨后在翻轉后的圖標中進行downlading進度加載動畫效果代碼,本段代碼適應于所有網頁使用,有需要的朋友們可以前來下載使2016-05-09- 這篇文章主要介紹了CSS實現(xiàn)彈簧效果的旋轉加載動畫的相關資料,像是彈簧在不斷伸縮,顯示加載進度,感興趣的小伙伴們可以參考一下2016-04-25
CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉加載動畫
這篇文章主要介紹了CSS實現(xiàn)大小相同、顏色深淺不一的粒子旋轉加載動畫的相關代碼,運用CSS3的border-radius圓角屬性、box-shadow陰影屬性等屬性制作出來的,感興趣的小伙伴2016-04-25- 這篇文章主要介紹了CSS實現(xiàn)圓環(huán)旋轉加載動畫,一個圓環(huán)表示加載進度,像一個時鐘順時針旋轉一圈,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-25
- 這篇文章主要介紹了CSS實現(xiàn)橫向粒子變動加載動畫的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-25
- 因為公司項目需要用到懶加載來提高網站加載速度,所以將非首屏渲染必需的css文件進行動態(tài)加載操作。接下來通過本文給大家分享實現(xiàn)代碼,需要的朋友參考下2017-01-18