文字逐个显隐加载效果

栏目: Html · 发布时间: 5年前

核心属性

display: flex + justify-content: center + align-items: center 文字在页面中居中显示

animation + transform + animation-delay 文字逐个显隐的动画效果

  1. <div class="start-screen">
  2. <div class="loading">
  3. <div class="loading__element el1">加</div>
  4. <div class="loading__element el2">载</div>
  5. <div class="loading__element el3">中</div>
  6. <div class="loading__element el4">,</div>
  7. </div>
  8. <div class="loading">
  9. <div class="loading__element el1">请</div>
  10. <div class="loading__element el2">稍</div>
  11. <div class="loading__element el3">候</div>
  12. <div class="loading__element el4">.</div>
  13. <div class="loading__element el5">.</div>
  14. <div class="loading__element el6">.</div>
  15. <div class="loading__element el7">.</div>
  16. <div class="loading__element el8">.</div>
  17. <div class="loading__element el9">.</div>
  18. </div>
  19. </div>
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. border: 0;
  5. box-sizing: border-box;
  6. }
  7. body {
  8. background-color: #1fa2ed;
  9. color: #fff;
  10. }
  11. .start-screen {
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. flex-flow: nowrap column;
  16. min-height: 100vh;
  17. }
  18. .loading {
  19. display: flex;
  20. margin: 24px 0;
  21. }
  22. .loading__element {
  23. font: normal 100 1.5rem/1 "NSimSun";
  24. letter-spacing: .5em;
  25. }
  26. [class*="el"] {
  27. animation: bouncing 2s infinite ease;
  28. }
  29. .el1 {
  30. animation-delay: 0.1s;
  31. }
  32. .el2 {
  33. animation-delay: 0.2s;
  34. }
  35. .el3 {
  36. animation-delay: 0.3s;
  37. }
  38. .el4 {
  39. animation-delay: 0.4s;
  40. }
  41. .el5 {
  42. animation-delay: 0.5s;
  43. }
  44. .el6 {
  45. animation-delay: 0.6s;
  46. }
  47. .el7 {
  48. animation-delay: 0.7s;
  49. }
  50. .el8 {
  51. animation-delay: 0.8s;
  52. }
  53. .el9 {
  54. animation-delay: 0.9s;
  55. }
  56. @keyframes bouncing {
  57. 0%, 100% {
  58. transform: scale3d(1, 1, 1);
  59. }
  60. 50% {
  61. transform: scale3d(0, 0, 1);
  62. }
  63. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithms in C++

Algorithms in C++

Robert Sedgewick / Addison-Wesley Professional / 1992-05-10 / USD 64.99

This version of Sedgewick's bestselling book provides a comprehensive collection of algorithms implemented in C++. The algorithms included cover a broad range of fundamental and more advanced methods:......一起来看看 《Algorithms in C++》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试