如何只用CSS完成漂亮的加载

0% {

width: 0;

height: 0;

border-right-color: transparent;

}

24.99% {

border-right-color: transparent;

}

25% {

height: 0;

width: 100%;

border-right-color: black;

}

50%,

100% {

width: 100%;

height: 100%;

}

我们对 div.logo::after 反复雷同的操作, 不要忘了调剂时光和反转 width 和 height. 如今, 我们就有了最外层边框的┞符个动画.

方块动画

最后，我们一路来设置方块的动画

我们最大年夜的挑衅是无法连接 keyframes。因为，我们最终想要的动画中每个小方框都有必定的次序，为此，我们作如下改变

0 to 25%：上边框和右边框浮现
25 to 50%：下边框和左边框浮现
50 to 65%：红色小方块浮现
65 to 80%：橙色小方块浮现
75 to 90%：白色小方块浮现

@keyframes red { 
 
  0%, 
 
  50% { 
 
    width: 0; 
 
    opacity: 0; 
 
  } 
 
  50.01% { 
 
    opacity: 1; 
 
  } 
 
  65%, 
 
  100% { 
 
    width: 27%; 
 
    opacity: 1; 
 
  } 
 
}

反复膳绫擎的代码，就可完成我们全部动画，是不是很完美

总结

感激你的浏览，最后附上所有的源码(http://t.cn/R93jmwe)，但小我建议，不要直接浏览源码，根据膳绫擎的提示在 codepen 中本身来一遍擦?鲱佳实践

4/4 首页上一页 2 3 4

　　推荐阅读

　　老网工: 浅谈SDN技术的部署和未来

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索进入2017年，基于SDN的解决筹>>>详细阅读

本文标题：如何只用CSS完成漂亮的加载

地址：http://www.17bianji.com/lsqh/36778.html

1/2 1