怎么用CSS3 loading實現預加載動畫特效

本篇內容介紹了“怎么用CSS3 loading實現預加載動畫特效”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

這是一款超酷CSS3 loading預加載動畫特效。該loading特效共有4種不同的效果，分別通過不同的CSS3 keyframes幀動畫來完成。

HTML結構

4種loading預加載動畫的HTML結構分別如下：

<!-- 效果一 --><p class="spinner-box">  <p class="circle-border">    <p class="circle-core"></p>  </p>  </p> <!-- 效果二 --><p class="spinner-box">  <p class="configure-border-1">      <p class="configure-core"></p>  </p>    <p class="configure-border-2">    <p class="configure-core"></p>  </p> </p> <!-- 效果三 --><p class="spinner-box">  <p class="pulse-container">      <p class="pulse-bubble pulse-bubble-1"></p>    <p class="pulse-bubble pulse-bubble-2"></p>    <p class="pulse-bubble pulse-bubble-3"></p>  </p></p> <!-- 效果四 --><p class="spinner-box">  <p class="solar-system">    <p class="earth-orbit orbit">      <p class="planet earth"></p>      <p class="venus-orbit orbit">        <p class="planet venus"></p>        <p class="mercury-orbit orbit">          <p class="planet mercury"></p>          <p class="sun"></p>        </p>      </p>    </p>  </p></p>

CSS樣式

然后分別為它們添加下面的CSS樣式。

/* KEYFRAMES */ @keyframes spin {  from {    transform: rotate(0);  }  to{    transform: rotate(359deg);  }} @keyframes configure-clockwise {  0% {    transform: rotate(0);  }  25% {    transform: rotate(90deg);  }  50% {    transform: rotate(180deg);  }  75% {    transform: rotate(270deg);  }  100% {    transform: rotate(359deg);  }} @keyframes configure-xclockwise {  0% {    transform: rotate(45deg);  }  25% {    transform: rotate(-45deg);  }  50% {    transform: rotate(-135deg);  }  75% {    transform: rotate(-215deg);  }  100% {    transform: rotate(-305deg);  }} @keyframes pulse {  from {    opacity: 1;    transform: scale(1);  }  to {    opacity: .25;    transform: scale(.75);  }} /* GRID STYLING */ * {  box-sizing: border-box;} body {  min-height: 100vh;  background-color: #37474f;  display: flex;  justify-content: space-between;  flex-wrap: wrap;  align-items: flex-start;} .spinner-box {  width: 300px;  height: 300px;  display: flex;  justify-content: center;  align-items: center;  background-color: transparent;} /* SPINNING CIRCLE */ .circle-border {  width: 150px;  height: 150px;  padding: 3px;  display: flex;  justify-content: center;  align-items: center;  border-radius: 50%;  background: rgb(63,249,220);  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);  animation: spin .8s linear 0s infinite;} .circle-core {  width: 100%;  height: 100%;  background-color: #37474f;  border-radius: 50%;} /* X-ROTATING BOXES */ .configure-border-1 {  width: 115px;  height: 115px;  padding: 3px;  position: absolute;  display: flex;  justify-content: center;  align-items: center;  background: #ffab91;  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;} .configure-border-2 {  width: 115px;  height: 115px;  padding: 3px;  left: -115px;  display: flex;  justify-content: center;  align-items: center;  background: rgb(63,249,220);  transform: rotate(45deg);  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;} .configure-core {  width: 100%;  height: 100%;  background-color: #37474f;} /* PULSE BUBBLES */ .pulse-container {  width: 120px;  display: flex;  justify-content: space-between;  align-items: center;} .pulse-bubble {  width: 20px;  height: 20px;  border-radius: 50%;  background-color: #3ff9dc;} .pulse-bubble-1 {    animation: pulse .4s ease 0s infinite alternate;}.pulse-bubble-2 {    animation: pulse .4s ease .2s infinite alternate;}.pulse-bubble-3 {    animation: pulse .4s ease .4s infinite alternate;} /* SOLAR SYSTEM */ .solar-system {  width: 250px;  height: 250px;  display: flex;  justify-content: center;  align-items: center;} .orbit {    position: relative;    display: flex;    justify-content: center;    align-items: center;    border: 1px solid #ffffffa5;    border-radius: 50%;} .earth-orbit {    width: 165px;    height: 165px;  -webkit-animation: spin 12s linear 0s infinite;} .venus-orbit {    width: 120px;    height: 120px;  -webkit-animation: spin 7.4s linear 0s infinite;} .mercury-orbit {    width: 90px;    height: 90px;  -webkit-animation: spin 3s linear 0s infinite;} .planet {    position: absolute;    top: -5px;  width: 10px;  height: 10px;    border-radius: 50%;  background-color: #3ff9dc;} .sun {    width: 35px;    height: 35px;    border-radius: 50%;    background-color: #ffab91;}

“怎么用CSS3 loading實現預加載動畫特效”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！