卡卡網(wǎng)

本文介紹一個(gè)CSS加載動(dòng)畫(loading animation)——扭動(dòng)的圓環(huán)，該效果適用于等待過程的動(dòng)畫顯示。

效果圖

demodownload

實(shí)例介紹

該實(shí)例中，白色圓環(huán)上下無限平滑扭動(dòng)，多用于過程等待期間的畫面中，實(shí)例由CSS+JavaScript實(shí)現(xiàn)。

HTML代碼

HTML代碼非常簡單，一個(gè)div容器，里面一個(gè)canvas畫布標(biāo)簽。div標(biāo)簽的id值為loader。

<div id="loader">
    <canvas></canvas>
</div>

CSS代碼

CSS代碼也不多，其中#loader canvas定義動(dòng)畫畫布寬度和高度，*定義box-sizing的屬性為inherit。box-sizing是CSS3的box屬性之一，該屬性定義如何計(jì)算一個(gè)元素的總寬度和總高度， inherit 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

#loader canvas {
  width: 240px;
  height: 240px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

JavaScript

本動(dòng)畫實(shí)例用到JavsScript編程，并且用了一個(gè)JS插件：three.min.js。

<script src='jquery-3.2.1.min.js'></script>
<script src='three.min.js'></script>

let $canvas = $('#loader canvas'),
canvas = $canvas[0],
renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  context: canvas.getContext('webgl2'),
  antialias: true,
  alpha: true
});

注意第一行#loader canvas的含義，#loader為HTML代碼中div容器的id值。

總結(jié)

本文介紹了一個(gè)CSS+JavaScript實(shí)現(xiàn)的加載動(dòng)畫(loading animation)效果，該效果顯示為上下無限扭動(dòng)的圓環(huán)，適用于某個(gè)等待過程的提示畫面中。請(qǐng)注意，文中代碼非完整，喜歡該效果的朋友可以直接下載源碼使用。 

相關(guān)文章

• css3 loading加載動(dòng)畫圓形/圓周滾動(dòng)效果【演示/源碼下載】
• 純CSS實(shí)現(xiàn)的轉(zhuǎn)動(dòng)的圓環(huán)加載動(dòng)畫
• CSS loading加載動(dòng)畫(旋轉(zhuǎn)的圓環(huán))
• 3個(gè)漂亮的純CSS動(dòng)畫進(jìn)度條
• 8個(gè)SVG加載(loading)動(dòng)畫實(shí)例代碼
• 4個(gè)漂亮的CSS3 Loading預(yù)加載動(dòng)畫實(shí)例
• CSS3 Loading 旋轉(zhuǎn)圓盤加載動(dòng)畫
• CSS3 loading音波效果預(yù)加載動(dòng)畫
• CSS3 Loading預(yù)加載動(dòng)畫8個(gè)常見實(shí)例
• CSS Loading 左右滾動(dòng)加載動(dòng)畫等5實(shí)例【源碼下載】

標(biāo)簽: css  css-loading  css3-loading  加載動(dòng)畫  動(dòng)畫  圓環(huán)動(dòng)畫