今天要介紹的是用簡單的CSS——只用CSS，不用Gif——制作“加載中…”動畫效果。先看看效果：

上面的這個加載中效果，以前是用gif動圖實現的，但隨著CSS的進步，CSS動畫功能越來越強大，我們只用一小片段HTML和CSS就能實現，方便了很多，體積也減小了很多。

再加上一些CSS：

.pswp__preloader__icn {

opacity:0.75;

width: 24px;

height: 24px;

-webkit-animation: clockwise 500ms linear infinite;

animation: clockwise 500ms linear infinite;

}

/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */

.pswp__preloader__cut {

position: relative;

width: 12px;

height: 24px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

}

.pswp__preloader__donut {

box-sizing: border-box;

width: 24px;

height: 24px;

border: 2px solid #000;

border-radius: 50%;

border-left-color: transparent;

border-bottom-color: transparent;

position: absolute;

top: 0;

left: 0;

background: none;

margin:0;

-webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;

animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;

}

@-webkit-keyframes clockwise {

0% { -webkit-transform: rotate(0deg) }

100% { -webkit-transform: rotate(360deg) }

}

@keyframes clockwise {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg) }

}

@-webkit-keyframes donut-rotate {

0% { -webkit-transform: rotate(0) }

50% { -webkit-transform: rotate(-140deg) }

100% { -webkit-transform: rotate(0) }

}

@keyframes donut-rotate {

0% { transform: rotate(0) }

50% { transform: rotate(-140deg) }

100% { transform: rotate(0) }

}

總結

以上是生活随笔為你收集整理的html 载入中,用纯CSS实现加载中动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。