CSS加载动画(loading animation)-扭动的圆环

技术频道 - html技术

CSS加载动画(loading animation)-扭动的圆环

作者:admin 时间:2023-4-6 12:53:53 浏览:

本文介绍一个CSS加载动画(loading animation)——扭动的圆环，该效果适用于等待过程的动画显示。

效果图

CSS加载动画(loading animation)-扭动的圆环

demo download

实例介绍

该实例中，白色圆环上下无限平滑扭动，多用于过程等待期间的画面中，实例由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)效果，该效果显示为上下无限扭动的圆环，适用于某个等待过程的提示画面中。请注意，文中代码非完整，喜欢该效果的朋友可以直接下载源码使用。

相关文章