带粒子背景的圆环旋转加载特效

来源:https://www.sucaihuo.com/js/2783.html 2017-08-19 23:01浏览(1528) 收藏

一款带粒子背景的圆环旋转加载特效,有蓝色和白色两种动态的粒子背景,不同旋转方向的圆环无限循环的旋转着,中间的“加载中...”字样也有一个颜色的变化效果。
带粒子背景的圆环旋转加载特效
分类:css3 > transform 难易:初级
查看演示 下载资源: 45 下载资源 下载积分: 20 积分

页面的head部分,需引入页面元素的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,需设置好旋转圆环和粒子背景的div容器,代码如下:

<div class="e-loadholder">
	<div class="m-loader">
		<span class="e-text">加载中...</span>
	</div>
</div>
<div id="particleCanvas-Blue"></div>
<div id="particleCanvas-White"></div>

页面的底部,需引入粒子插件和配套的设置JS,代码如下:

<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
评论4
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

  • 头像 3楼
    11-14 16:58
    y***i
    喜欢这个。
  • 头像 板凳
    11-08 00:46
    4***7
    科技感~
  • 头像 椅子
    09-14 12:42
    b***k
    很漂亮的加载页面
  • 头像 沙发
    08-20 10:37
    r***i
    希望楼主能够提供更多的好东西!!
    1
    舒***畅:

    好的,我会加油的!

1 2