cid1016 使用HTML CSS 实现一个有趣的加载页面

作者code

index.html

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <div class="box"></div>
  11. <div class="box"></div>
  12. </div>
  13. </body>
  14. </html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

 

style.css

  1. body{
  2. margin: 0;
  3. padding: 0;
  4. background: #344;
  5. }
  8. .container{
  9. position: absolute;
  10. left: 50%;
  11. top: 50%;
  12. transform: translate(-50%,-50%);
  13. width: 60px;
  14. height: 60px;
  15. }
  17. .box{
  18. position: absolute;
  19. width: 30px;
  20. height: 30px;
  21. background: #e74c3c;
  22. }
  24. .box:nth-child(1){
  25. animation: a1 2s infinite linear;
  26. }
  28. .box:nth-child(2){
  29. animation: a2 2s infinite linear;
  30. }
  33. @keyframes a1 {
  34. 0%{
  35. top: 0;
  36. left: 0;
  37. width: 30px;
  38. height: 30px;
  39. }
  40. 12.5%{
  41. top: 0;
  42. left: 0;
  43. width: 60px;
  44. height: 30px;
  45. }
  46. 25%{
  47. top: 0;
  48. left: 0;
  49. width: 60px;
  50. height: 30px;
  51. }
  52. 37.5%{
  53. top: 0;
  54. left: 30px;
  55. width: 30px;
  56. height: 30px;
  57. }
  58. 50%{
  59. top: 0;
  60. left: 30px;
  61. width: 30px;
  62. height: 30px;
  63. }
  64. 62.5%{
  65. top: 0;
  66. left: 30px;
  67. width: 30px;
  68. height: 60px;
  69. }
  70. 75%{
  71. top: 0;
  72. left: 30px;
  73. width: 30px;
  74. height: 60px;
  75. }
  76. 87.5%{
  77. top: 30px;
  78. left: 30px;
  79. width: 30px;
  80. height: 30px;
  81. }
  82. 100%{
  83. top: 30px;
  84. left: 30px;
  85. width: 30px;
  86. height: 30px;
  87. }
  88. }
  90. @keyframes a2 {
  91. 0%{
  92. right: 0;
  93. bottom: 0;
  94. width: 30px;
  95. height: 30px;
  96. }
  97. 12.5%{
  98. right: 0;
  99. bottom: 0;
  100. width: 30px;
  101. height: 30px;
  102. }
  103. 25%{
  104. right: 0;
  105. bottom: 0;
  106. width: 60px;
  107. height: 30px;
  108. }
  109. 37.5%{
  110. right: 0;
  111. bottom: 0;
  112. width: 60px;
  113. height: 30px;
  114. }
  115. 50%{
  116. right: 30px;
  117. bottom: 0;
  118. width: 30px;
  119. height: 30px;
  120. }
  121. 62.5%{
  122. right: 30px;
  123. bottom: 0;
  124. width: 30px;
  125. height: 30px;
  126. }
  127. 75%{
  128. right: 30px;
  129. bottom: 0;
  130. width: 30px;
  131. height: 60px;
  132. }
  133. 87.5%{
  134. right: 30px;
  135. bottom: 0;
  136. width: 30px;
  137. height: 60px;
  138. }
  139. 100%{
  140. right: 30px;
  141. bottom: 30px;
  142. width: 30px;
  143. height: 30px;
  144. }
  145. }
body{
  margin: 0;
  padding: 0;
  background: #344;
}


.container{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 60px;
  height: 60px;
}

.box{
  position: absolute;
  width: 30px;
  height: 30px;
  background: #e74c3c;
}

.box:nth-child(1){
  animation: a1 2s infinite linear;
}

.box:nth-child(2){
  animation: a2 2s infinite linear;
}


@keyframes a1 {
  0%{
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
  }
  12.5%{
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
  }
  25%{
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
  }
  37.5%{
    top: 0;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  50%{
    top: 0;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  62.5%{
    top: 0;
    left: 30px;
    width: 30px;
    height: 60px;
  }
  75%{
    top: 0;
    left: 30px;
    width: 30px;
    height: 60px;
  }
  87.5%{
    top: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
  }
  100%{
    top: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
  }
}

@keyframes a2 {
  0%{
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  12.5%{
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  25%{
    right: 0;
    bottom: 0;
    width: 60px;
    height: 30px;
  }
  37.5%{
    right: 0;
    bottom: 0;
    width: 60px;
    height: 30px;
  }
  50%{
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  62.5%{
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 30px;
  }
  75%{
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 60px;
  }
  87.5%{
    right: 30px;
    bottom: 0;
    width: 30px;
    height: 60px;
  }
  100%{
    right: 30px;
    bottom: 30px;
    width: 30px;
    height: 30px;
  }
}

 

让链接同时具备两种打开方式

获取源码: Loading 1
下载数:45人次, 文件大小: 94 B, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,780 人查阅

类似文章