Tab选项卡

CSS3仿Windows phone加载动画特效

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

CSS3仿Windows phone加载动画特效-云模板
这是一款使用纯 CSS3 来制作的 Windows phone loading 加载动画特效。该 loading 动画特效使用 CSS3 animation 属性,通过设置不同的延迟时间来达到 loading 动画的效果。

HTML 结构

该 loading 动画特效使用一组<span>元素来制作 loading 指示器的小圆点。

也想出现在这里?联系我们
创客主机
  1. <span class="l-1"></span>
  2. <span class="l-2"></span>
  3. <span class="l-3"></span>
  4. <span class="l-4"></span>
  5. <span class="l-5"></span>
  6. <span class="l-6"></span>

CSS 样式

在 CSS 样式中,通过 span[class*="l-"]选择器来选择所有的 loading 圆点。它们被显示为 inline-block,并制作为圆形。每一个小圆点都使用指定贝兹曲线的过渡动画,同时还指定了它们的 animation-fill-mode 为 both。animation-fill-mode 属性用于指定在 animation 动画之外的时间里动画如何执行。它的取值有:none,forwards,backwards 和 both。forwards 属性会在 animation 动画结束之后继续执行最后一次迭代的动画。backwards 属性会在 animation 动画开始之前执行第一次迭代的动画。both 表示的是 forwards 属性和 backwards 属性的组合。

  1. span[class*="l-"] {
  2.   height: 4px; width: 4px;
  3.   background: #000;
  4.   display: inline-block;
  5.   margin: 12px 2px;
  6.  
  7.   border-radius: 100%;
  8.   -webkit-border-radius: 100%;
  9.   -moz-border-radius: 100%;
  10.  
  11.   -webkit-animation: loader 4s infinite;
  12.   -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
  13.   -webkit-animation-fill-mode: both;
  14.   -moz-animation: loader 4s infinite;
  15.   -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
  16.   -moz-animation-fill-mode: both;
  17.   -ms-animation: loader 4s infinite;
  18.   -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
  19.   -ms-animation-fill-mode: both;
  20.   animation: loader 4s infinite;
  21.   animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
  22.   animation-fill-mode: both;
  23. }
  24. @-webkit-keyframes loader {
  25.   0% {-webkit-transform: translateX(-30px); opacity: 0;}
  26.   25% {opacity: 1;}
  27.   50% {-webkit-transform: translateX(30px); opacity: 0;}
  28.   100% {opacity: 0;}
  29. }
  30.  
  31. @-moz-keyframes loader {
  32.   0% {-moz-transform: translateX(-30px); opacity: 0;}
  33.   25% {opacity: 1;}
  34.   50% {-moz-transform: translateX(30px); opacity: 0;}
  35.   100% {opacity: 0;}
  36. }
  37.  
  38. @-keyframes loader {
  39.   0% {-transform: translateX(-30px); opacity: 0;}
  40.   25% {opacity: 1;}
  41.   50% {-transform: translateX(30px); opacity: 0;}
  42.   100% {opacity: 0;}
  43. }
  44.  
  45. @-ms-keyframes loader {
  46.   0% {-ms-transform: translateX(-30px); opacity: 0;}
  47.   25% {opacity: 1;}
  48.   50% {-ms-transform: translateX(30px); opacity: 0;}
  49.   100% {opacity: 0;}
  50. }

最后为每一个小圆点设置不同的动画延迟时间。

  1. span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
  2. span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
  3. span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
  4. span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
  5. span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
  6. span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
下载地址

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

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

热评文章

发表评论

热销模板

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

Envato

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

12

12.12 惠不可挡

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

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

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

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

咨 询 客 服