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

效果圖

demodownload

實例介紹

該實例中，白色圓環上下無限平滑扭動，多用于過程等待期間的畫面中，實例由CSS+JavaScript實現。

HTML代碼

HTML代碼非常簡單，一個div容器，里面一個canvas畫布標簽。div標簽的id值為loader。

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

CSS代碼

CSS代碼也不多，其中#loader canvas定義動畫畫布寬度和高度，*定義box-sizing的屬性為inherit。box-sizing是CSS3的box屬性之一，該屬性定義如何計算一個元素的總寬度和總高度， inherit 規定應從父元素繼承 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

本動畫實例用到JavsScript編程，并且用了一個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值。

總結

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

相關文章

• css3 loading加載動畫圓形/圓周滾動效果【演示/源碼下載】
• 純CSS實現的轉動的圓環加載動畫
• CSS loading加載動畫(旋轉的圓環)
• 3個漂亮的純CSS動畫進度條
• 8個SVG加載(loading)動畫實例代碼
• 4個漂亮的CSS3 Loading預加載動畫實例
• CSS3 Loading 旋轉圓盤加載動畫
• CSS3 loading音波效果預加載動畫
• CSS3 Loading預加載動畫8個常見實例
• CSS Loading 左右滾動加載動畫等5實例【源碼下載】

標簽: css  css-loading  css3-loading  加載動畫  動畫  圓環動畫