利用CSS3實現氣泡加載圖標動畫特效



20 78 27



特效描述:利用CSS3實現 氣泡加載圖標 動畫特效,利用CSS3實現氣泡加載圖標動畫特效

代碼結構

1. HTML代碼

<style>
  * {
    box-sizing: border-box;
  }
  html,
  body {
    align-items: center;
    background: linear-gradient(45deg, #d91e18, #9a12b3);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }
  .wrapper {
    position: absolute;
  }
  .wrapper:nth-of-type(2)>div {
    height: 40px;
    width: 40px;
    opacity: 0.8;
  }
  .wrapper:nth-of-type(3)>div {
    height: 30px;
    width: 30px;
    opacity: 0.6;
  }
  .wrapper:nth-of-type(4)>div {
    height: 20px;
    width: 20px;
    opacity: 0.4;
  }
  .wrapper:nth-of-type(5)>div {
    height: 10px;
    width: 10px;
    opacity: 0.2;
  }
  .wrapper>div {
    background: #fff;
    border-radius: 100%;
    height: 50px;
    margin: 40px;
    width: 50px;
  }
</style>
<div class='wrapper'>
	<div></div>
</div>
<div class='wrapper'>
	<div></div>
</div>
<div class='wrapper'>
	<div></div>
</div>
<div class='wrapper'>
	<div></div>
</div>
<div class='wrapper'>
	<div></div>
</div>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 延遲加載 無限加載 延遲 加載 加載動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表