网站需要一些预加载的动画用于加载网页时的美化。
效果：https://moeqy.com/
主要实现方法：
l | <div class="loading"> |
| |
| <p style="color: #999; text-align: center;">为美好的世界献上祝福<br>MoeQY</p> |
| |
| </div> |
s | .loading { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #fff; |
| z-index: 999999; |
| } |
| |
| .fadeout { |
| opacity: 0; |
| transition: all 0.3s ease; |
| } |
t | window.onload = function(){ |
| setTimeout(function(){ |
| var loader = document.getElementsByClassName("loading")[0]; |
| loader.className="loading fadeout" ; |
| setTimeout(function(){loader.style.display="none"},1000) |
| },1000) |
| } |
动画示例： 可能与实际效果不符，详情请见效果页。
l | <div class="spinner"> |
| <div class="rect1"></div> |
| <div class="rect2"></div> |
| <div class="rect3"></div> |
| <div class="rect4"></div> |
| <div class="rect5"></div> |
| </div> |
s | .spinner { |
| margin: 100px auto; |
| width: 50px; |
| height: 60px; |
| text-align: center; |
| font-size: 10px; |
| } |
| |
| .spinner > div { |
| background-color: #FFC0CB; |
| height: 100%; |
| width: 6px; |
| display: inline-block; |
| |
| -webkit-animation: stretchdelay 1.2s infinite ease-in-out; |
| animation: stretchdelay 1.2s infinite ease-in-out; |
| } |
| |
| .spinner .rect2 { |
| -webkit-animation-delay: -1.1s; |
| animation-delay: -1.1s; |
| } |
| |
| .spinner .rect3 { |
| -webkit-animation-delay: -1.0s; |
| animation-delay: -1.0s; |
| } |
| |
| .spinner .rect4 { |
| -webkit-animation-delay: -0.9s; |
| animation-delay: -0.9s; |
| } |
| |
| .spinner .rect5 { |
| -webkit-animation-delay: -0.8s; |
| animation-delay: -0.8s; |
| } |
| |
| @-webkit-keyframes stretchdelay { |
| 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } |
| 20% { -webkit-transform: scaleY(1.0) } |
| } |
| |
| @keyframes stretchdelay { |
| 0%, 40%, 100% { |
| transform: scaleY(0.4); |
| -webkit-transform: scaleY(0.4); |
| } 20% { |
| transform: scaleY(1.0); |
| -webkit-transform: scaleY(1.0); |
| } |
| } |
文章参考：
https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html | 梦想天空 使用 CSS3 实现超炫的 Loading（加载）动画效果
https://segmentfault.com/a/1190000003776715 | segmentfault 实现加载页 Loading Page 的几种方法
