卡卡網(wǎng)

CSS loading 加載動(dòng)畫(huà)用于程序加載過(guò)程中的顯示，它的作用是告訴用戶程序還在進(jìn)行中，不要關(guān)閉窗口。有些人用GIF圖片來(lái)設(shè)計(jì)loading加載畫(huà)面，本文介紹用純CSS來(lái)實(shí)現(xiàn)一個(gè)loading加載動(dòng)畫(huà)。

demodownload

HTML

HTML代碼十分簡(jiǎn)單，只有一個(gè)div，div里也只有一個(gè)類屬性loader。

<div class="loader"></div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border-width: 0.25rem;
  border-style: solid;
  border-color: gainsboro gainsboro dodgerblue gainsboro;
  border-radius: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  -webkit-animation: rotate 1.5s linear infinite;
          animation: rotate 1.5s linear infinite;
}

.loader 定義圓邊的樣式。

animation: rotate 1.5s linear infinite; 這里rotate意思為旋轉(zhuǎn)，1.5s為每1.5秒完成一次運(yùn)動(dòng)，infinite為循環(huán)進(jìn)行，linear為動(dòng)畫(huà)從頭到尾的速度是相同的。

@keyframes rotate 定義圓環(huán)的旋轉(zhuǎn)方向和角度。

您可能對(duì)以下文章也感興趣

• CSS3 loading預(yù)加載動(dòng)畫(huà)旋轉(zhuǎn)的圓弧【演示/源碼下載】
• 4個(gè)漂亮的CSS3 Loading預(yù)加載動(dòng)畫(huà)實(shí)例
• CSS3 Loading 旋轉(zhuǎn)圓盤加載動(dòng)畫(huà)
• CSS3 loading音波效果預(yù)加載動(dòng)畫(huà)
• CSS3 Loading預(yù)加載動(dòng)畫(huà)8個(gè)常見(jiàn)實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫(huà)等5實(shí)例【源碼下載】

標(biāo)簽: css-loading  加載動(dòng)畫(huà)