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

2021-09-09 04:38:32

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


为什么要做加载

只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载

我是如何做的

不同的页面, 对加载的设计也就可能不同. 本文设计的加载适合大多数页面.

并且, 本文假设读者已经非常熟悉伪元素, CSS 动画属性和keyframe, 如果读者想重温, 下面两篇文章可做参考

  • 学会使用 CSS 中的 :after 和 :before
  • keyframe 动画直通车

开始入门

在开始一起构建它前, 我们先看看它最后的效果

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

正如你所看到的, 我们将经历 4 个步骤

  • 边框一个接一个地出现
  • 红/橙/白色方块向里滑入
  • 方块向外划出
  • 边框消失

我们只需要 animation-direction: alternate 来完成步骤 1 和 2, 步骤 3 和 步骤 4 我们可以使用 reverse, 另外, 我们可以使用 animation-iteration-count: infinite 重复动画

首先, 我们先书写好基本的 HTML 结构



    

  1. <!doctype html>  
    2. 

  2. <html>  
    3. 

  3.   <head>  
    4. 

  4.     <!-- <link rel="preload"> for CSS, JS, and font files  -->  
    5. 

  5.     <style type="text/css">  
    6. 

  6.       /*  
    7. 

  7.        *  All the CSS for the loader  
    8. 

  8.        *  Minified and vendor prefixed  
    9. 

  9.        */  
    10. 

  10.     </style>  
    11. 

  11.   </head>  
    12. 

  12.   <body>  
    13. 

  13.     <div class="loader">  
    14. 

  14.       <!-- HTML for the loader -->  
    15. 

  15.     </div>  
    16. 

  16.     <header />  
    17. 

  17.     <main />  
    18. 

  18.     <footer />  
    19. 

  19.     <!-- Tags for CSS and JS files -->  
    20. 

  20.   </body>  
    21. 

  21. </html>  
    22. 



构建 logo 本身


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


一开始我们先实现 logo 本身, 而不是最终版本的效果


父级元素 logo, 不同颜色的方块都是它的子元素




    

  1. <div class="logo">  
    2. 

  2.   <div class="white"></div>  
    3. 

  3.   <div class="orange"></div>  
    4. 

  4.   <div class="red"></div>  
    5. 

  5. </div>  
    6. 



我们用 less 来实现




    

  1. .logo {  
    2. 

  2.   position: relative;  
    3. 

  3.   width: 100px;  
    4. 

  4.   height: 100px;  
    5. 

  5.   border: 4px solid black;  
    6. 

  6.   box-sizing: border-box;  
    7. 

  7.   background-color: white;   
    8. 

  8.   & > div {  
    9. 

  9.     position: absolute;  
    10. 

  10.   }     
    11. 

  11.   .red {  
    12. 

  12.     top: 0;  
    13. 

  13.     bottom: 0;  
    14. 

  14.     left: 0;  
    15. 

  15.     width: 27%;  
    16. 

  16.     border-right: 4px solid black;  
    17. 

  17.     background-color: #EA5664;  
    18. 

  18.   } 
    19. 

  19.   /* Similar code for div.orange and div.white */  
    20. 

  20. }  
    21. 



logo 的效果图如下


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


边框动画


接下来, 我们将进入棘手(有趣)的部分


CSS 不允许我们直接对 div.logo 的边框进行设置达到我们想要的效果, 所以我们必须去除原有的边框, 采用其他的办法来实现


我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素


废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo  的左上角，代表方块的上边框和右边框


, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框


现在, less 代码变成了这样




    

  1. .logo {  
    2. 

  2.   position: relative;  
    3. 

  3.   width: 100px;  
    4. 

  4.   height: 100px;  
    5. 

  5.   box-sizing: border-box; 
    6. 

  6.   background-color: white;    
    7. 

  7.   &::before,  
    8. 

  8.   &::after {  
    9. 

  9.     content: '';  
    10. 

  10.     position: absolute;  
    11. 

  11.     width: 100%;  
    12. 

  12.     height: 100%;  
    13. 

  13.     box-sizing: border-box;  
    14. 

  14.     border: 4px solid transparent;  
    15. 

  15.   }     
    16. 

  16.   &::before {  
    17. 

  17.     top: 0;  
    18. 

  18.     left: 0;  
    19. 

  19.     border-top-color: black;  
    20. 

  20.     border-right-color: black;  
    21. 

  21.   }    
    22. 

  22.   &::after {  
    23. 

  23.     bottom: 0;  
    24. 

  24.     right: 0;  
    25. 

  25.     border-bottom-color: red; // Red for demo purposes only  
    26. 

  26.     border-left-color: red;  
    27. 

  27.   }  
    28. 

  28. }  
    29. 



现在效果长这样


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


接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画


我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和


height 调整到 100%


随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了


该代码展示了伪元素的初始动画




    

  1. div.logo {  
    2. 

  2.   &::before,  
    3. 

  3.   &::after {  
    4. 

  4.     /* ... */  
    5. 

  5.     animation-timing-function: linear;  
    6. 

  6.   }  
    7. 

  7.   &::before {  
    8. 

  8.     /* ... */  
    9. 

  9.     animation: border-before 1.5s infinite;  
    10. 

  10.     animation-direction: alternate;  
    11. 

  11.   } 
    12. 

  12. }  
    13. 

  13. @keyframes border-before {  
    14. 

  14.   0% {  
    15. 

  15.     width: 0;  
    16. 

  16.     height: 0;  
    17. 

  17.     border-right-color: transparent;  
    18. 

  18.   }  
    19. 

  19.   24.99% {  
    20. 

  20.     border-right-color: transparent;  
    21. 

  21.   }  
    22. 

  22.   25% {  
    23. 

  23.     height: 0;  
    24. 

  24.     width: 100%;  
    25. 

  25.     border-right-color: black;  
    26. 

  26.   }  
    27. 

  27.   50%,  
    28. 

  28.   100% {  
    29. 

  29.     width: 100%;  
    30. 

  30.     height: 100%;  
    31. 

  31.   }  
    32. 

  32. }  
    33. 



我们对 div.logo::after 重复相同的操作, 不要忘了调整时间和反转 width 和 height. 现在,  我们就有了最外层边框的整个动画.


方块动画


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


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


    

  • 0 to 25%：上边框和右边框显现
    • 

  • 25 to 50%：下边框和左边框显现
    • 

  • 50 to 65%：红色小方块显现
    • 

  • 65 to 80%：橙色小方块显现
    • 

  • 75 to 90%：白色小方块显现
    • 



红色小方框 keyframe 如下




    

  1. @keyframes red {  
    2. 

  2.   0%,  
    3. 

  3.   50% {  
    4. 

  4.     width: 0;  
    5. 

  5.     opacity: 0;  
    6. 

  6.   }  
    7. 

  7.   50.01% {  
    8. 

  8.     opacity: 1;  
    9. 

  9.   }  
    10. 

  10.   65%,  
    11. 

  11.   100% {  
    12. 

  12.     width: 27%;  
    13. 

  13.     opacity: 1;  
    14. 

  14.   }  
    15. 

  15. }  
    16. 



重复上面的代码，就可完成我们整个动画， 是不是很完美


总结





















































感谢你的阅读，最后附上 所有的源码(http://t.cn/R93jmwe)，但个人建议，不要直接阅读源码，根据上面的提示在 codepen  中自己来一遍才是最佳实践





作者：佚名


来源：51CTO
上一篇：大数据处理的三种框架：Storm，Spark和Samza

下一篇：mysql高可用mha