文字逐个显隐加载效果

栏目: 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. }

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

查看所有标签

猜你喜欢:

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

平台革命:改变世界的商业模式

平台革命:改变世界的商业模式

[美]杰奥夫雷G.帕克(Geoffrey G. Parker)、马歇尔W.范·埃尔斯泰恩(Marshall W. Van Alstyne)、桑基特·保罗·邱达利(Sangeet Paul Choudary) / 志鹏 / 机械工业出版社 / 2017-10 / 65.00

《平台革命》一书从网络效应、平台的体系结构、颠覆市场、平台上线、盈利模式、平台开放的标准、平台治理、平台的衡量指标、平台战略、平台监管的10个视角,清晰地为读者提供了平台模式最权威的指导。 硅谷著名投资人马克·安德森曾经说过:“软件正在吞食整个世界。”而《平台革命》进一步指出:“平台正在吞食整个世界”。以平台为导向的经济变革为社会和商业机构创造了巨大的价值,包括创造财富、增长、满足人类的需求......一起来看看 《平台革命:改变世界的商业模式》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具