Tab选项卡

炫酷Loading加载动画CSS3特效

也想出现在这里?联系我们
创客云

炫酷Loading加载动画CSS3特效-云模板
这是一组效果非常炫酷的纯 CSS3 loading 加载动画特效。这组 loading 动画共 10 种不同的效果,全部使用 animation 帧动画制作而成。这些特效代码简洁,效果炫酷,非常值得学习借鉴。

HTML 结构

所有的 loading 效果都使用相同的 HTML 结构:使用<section>元素作为包裹元素,里面放置用于动画的 div.spinner 元素。各种动画效果均由 div.spinner 元素元素和它的:before 和:after 伪元素制作。

也想出现在这里?联系我们
创客主机
  1. <section class="mod model-1">
  2.   <div class="spinner"></div>
  3. </section>

CSS 样式

特效中为 spinner 元素设置了一些同于样式:宽度和高度均为 50 像素,相对于 section 绝对定位。

  1. .spinner {
  2.   width: 50px;
  3.   height: 50px;
  4.   border-radius: 100%;
  5.   margin: auto;
  6.   position: absolute;
  7.   left: 0;
  8.   right: 0;
  9.   top: 0;
  10.   bottom: 0;
  11.   margin: auto;
  12. }

在第一种 loading 效果中,section 的背景设置为褐色。spinner 元素执行 color-bubble 帧动画。这个帧动画修改元素的颜色。

  1. .model-1 {
  2.   background: #202020;
  3. }
  4. .model-1 .spinner {
  5.   color: #f00;
  6.   -webkit-animation: color-bubble 2s linear 0s infinite;
  7.   animation: color-bubble 2s linear 0s infinite;
  8. }

为了制作圆形光波扩展效果,这个特效中使用 spinner 元素的:before 和:after 伪元素来制作。通过 spinner-bubble 帧动画来修改它们的大小和透明度。

  1. .model-1 .spinner:after, .model-1 .spinner:before {
  2.   content: '';
  3.   position: absolute;
  4.   left: 0;
  5.   right: 0;
  6.   top: 0;
  7.   bottom: 0;
  8.   border-radius: 100%;
  9.   box-shadow: 0 0 0 3px;
  10.   -webkit-animation: spinner-bubble 1.3s linear 0s infinite;
  11.   animation: spinner-bubble 1.3s linear 0s infinite;
  12.   margin: auto;
  13.   width: 10px;
  14.   height: 10px;
  15.   opacity: 0;
  16. }
  17. .model-1 .spinner:before {
  18.   -webkit-animation: spinner-bubble 1.3s linear 2s infinite;
  19.   animation: spinner-bubble 1.3s linear 2s infinite;
  20. }

其它效果的制作方法基本类似,可以参考下载文件的 styles.css 文件。

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服