2018-05-24 14:01:16 浮生偷閒

內容導讀

然而，，看到css3 動畫就停不下來，哎，總是經不起誘惑，大概就是自己拿不到想要的offer的原因吧哭泣。加載條之前呢，在做公司項目的時候，為了顯示進度，需要有回調來顯示進度，所以用js控制了這個css3，今天看到一個加載的，覺得實在是太簡單了！嘿嘿，其實也不難，主要是要分析，仔細觀察第一個球球，什麼動畫效果呢？然後接下來的兩個球球跟第一個就是一個延時的區別而已了。之前不用css3屬性的時候，直接是寫一個span標籤絕對定位，jq實現動畫效果的。這裡主要就是用到了偽元素， ::after ， transition , :hover ，嗯，就是這麼簡單的。

前記：嚶嚶嚶，原本是想寫很多其他乾貨的筆記的。。然而，，看到css3 動畫就停不下來，哎，總是經不起誘惑，大概就是自己拿不到想要的offer的原因吧哭泣。。其他的筆記後來再補上吧

來源： 30 Second of CSS

加載條

之前呢，在做公司項目的時候，為了顯示進度，需要有回調來顯示進度，所以用js控制了這個css3，今天看到一個加載的，覺得實在是太簡單了！！！！

 .donut {
 width: 50px;
 height: 50px;
 border: 5px solid #ccc;
 border-bottom-color: #1395ba;
 border-radius: 50%;
 animation: donut 2s linear infinite;
 }
 @keyframes donut {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
 }

donghua.gif

emmmm，那就再做多一個小功能，就是可以暫停的，我覺得可以暫停會比較好玩嘻嘻，其實也就是添加多一個class，設置一個animation-play-state

GIF1.gif

嘻嘻，附上代碼

 
 
 
 

 
 
 .stop {
 animation-play-state: paused;
 }

就只添加了一個控制添加多一個class的功能而已啦。。

彈動加載效果

先看效果吧

GIF.gif

嘿嘿，其實也不難，主要是要分析，仔細觀察第一個球球，什麼動畫效果呢？就是上下和透明度嘛。。然後接下來的兩個球球跟第一個就是一個延時的區別而已了。。

 .container {
 position: relative;
 text-align: center;
 width: 100px;
 }
 .item {
 display: inline-block;
 height: 15px;
 width: 15px;
 border-radius: 50%;
 background: #969aec;;
 animation: item 1s ease-in-out infinite;
 }
 .b {
 animation-delay: .2s;
 }
 .c {
 animation-delay: .4s;
 }
 @keyframes item {
 0% {
 transform: translateY(0);
 opacity: 1;
 }
 50% {
 transform: translateY(20px);
 opacity: 0;
 }
 100% {
 transform: translateY(0);
 opacity: 1;
 }
 }