網頁載入時樣式效果css如何?？（多種樣式樣本）

在web前端開發過程中，作為站長可能要考慮到，頁面如果出現正在載入狀態時該如何用css來展示等待載入的樣式，一個好看的css網頁載入動畫可以減少使用者等待過程中的乏味時刻。那麼本篇文章就給大家介紹css載入中動畫具體是如何?的問題?

純css代碼實現頁面載入中樣式：

一、條形波動樣式的css載入動畫程式碼範例如下：

<div class="spinner">  <div class="re1"></div>  <div class="re2"></div>  <div class="re3"></div>  <div class="re4"></div>  <div class="re5"></div></div>.spinner {  margin: 100px auto;  width: 50px;  height: 60px;  text-align: center;  font-size: 10px;} .spinner > div {  background-color: #67CF22;  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 .re2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;} .spinner .re3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} .spinner .re4 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;} .spinner .re5 {  -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);  }}

代碼效果如：

二、圓形迴圈樣式的css載入中動畫程式碼範例如下：

.container1 > div, .container2 > div, .container3 > div {  width: 6px;  height: 6px;  background-color: #333;   border-radius: 100%;  position: absolute;  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;  animation: bouncedelay 1.2s infinite ease-in-out;  -webkit-animation-fill-mode: both;  animation-fill-mode: both;} .spinner .spinner-container {  position: absolute;  width: 100%;  height: 100%;} .container2 {  -webkit-transform: rotateZ(45deg);  transform: rotateZ(45deg);} .container3 {  -webkit-transform: rotateZ(90deg);  transform: rotateZ(90deg);} .circle1 { top: 0; left: 0; }.circle2 { top: 0; right: 0; }.circle3 { right: 0; bottom: 0; }.circle4 { left: 0; bottom: 0; } .container2 .circle1 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;} .container3 .circle1 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;} .container1 .circle2 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;} .container2 .circle2 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;} .container3 .circle2 {  -webkit-animation-delay: -0.7s;  animation-delay: -0.7s;} .container1 .circle3 {  -webkit-animation-delay: -0.6s;  animation-delay: -0.6s;} .container2 .circle3 {  -webkit-animation-delay: -0.5s;  animation-delay: -0.5s;} .container3 .circle3 {  -webkit-animation-delay: -0.4s;  animation-delay: -0.4s;} .container1 .circle4 {  -webkit-animation-delay: -0.3s;  animation-delay: -0.3s;} .container2 .circle4 {  -webkit-animation-delay: -0.2s;  animation-delay: -0.2s;} .container3 .circle4 {  -webkit-animation-delay: -0.1s;  animation-delay: -0.1s;} @-webkit-keyframes bouncedelay {  0%, 80%, 100% { -webkit-transform: scale(0.0) }  40% { -webkit-transform: scale(1.0) }} @keyframes bouncedelay {  0%, 80%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 40% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}

效果如：

三、圓點橫向波動樣式的css載入動畫實現程式碼範例如下：

.spinner > div {  width: 30px;  height: 30px;  background-color: #67CF22;   border-radius: 100%;  display: inline-block;  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;  animation: bouncedelay 1.4s infinite ease-in-out;  /* Prevent first frame from flickering when animation starts */  -webkit-animation-fill-mode: both;  animation-fill-mode: both;} .spinner .bounce1 {  -webkit-animation-delay: -0.32s;  animation-delay: -0.32s;} .spinner .bounce2 {  -webkit-animation-delay: -0.16s;  animation-delay: -0.16s;} @-webkit-keyframes bouncedelay {  0%, 80%, 100% { -webkit-transform: scale(0.0) }  40% { -webkit-transform: scale(1.0) }} @keyframes bouncedelay {  0%, 80%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 40% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}

效果如：