想學波紋效果？我教你呀-有解無憂

波紋效果展示

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-65qYpERM-1608550304291)(Video_2020-12-21_183014.gif)]

看上去是不是很高大上，其實明白了原理很簡單，

原理

利用border-radius畫出 2 個不規則的圓，調整到合適位置，讓圓超出父級一部分，然后父級設定overflow:hidden就可以了，然后將圓添加 CSS3 影片效果，實作旋轉影片，

如果還有點懵的話，那我就直接點，上代碼，

開始制作

首先我們先寫個 div，設定好寬高和顏色，

<div class="cole"></div>

.cole {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: rgb(41, 98, 255);
  left: calc(50% - 200px);
  top: 100px;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IfIU3EUn-1608550304295)(3.png)]

然后開始畫圓

第一個圓，我們畫個白色的，調整好位置后大概就這樣（后期可能還需要微調資料）

.cole::before {
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #fff;
  position: absolute;
  top: -45%;
  left: -20%;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EaCPpjK3-1608550304297)(4.png)]

第二個圓，我們畫個紅色的，調整好位置后大概就這樣（后期可能需要微調資料）

.cole::after {
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #f50057;
  position: absolute;
  top: -55%;
  left: -25%;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-oj0NfSrJ-1608550304300)(5.png)]

我們給 cole 添加樣式：overflow:hidden和border-radius:50%
分別代表超出內容隱藏以及圓角邊框，

.cole {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: rgb(41, 98, 255);
  left: calc(50% - 200px);
  top: 100px;
  overflow: hidden;
  border-radius: 50%;
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RnL7o4aS-1608550304301)(6.png)]

這時候是不是感覺已經初具雛形了，別急，我們還沒加上影片，

動起來

首先先設定關鍵幀影片

@keyframes rotate {
  50% {
    transform: rotate(180deg); //旋轉180°(半圈)
  }
  100% {
    transform: rotate(360deg); //旋轉360°(一圈)
  }
}

然后給兩個圓添加影片上去

.cole::before {
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #fff;
  position: absolute;
  top: -45%;
  left: -20%;
  animation: rotate 5s linear infinite; //影片
}
.cole::after {
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #f50057;
  position: absolute;
  top: -55%;
  left: -20%;
  animation: rotate 5s linear infinite; //影片
}

完成啦！

在這里插入圖片描述

（如果效果不滿意，可以自己去微調以下資料）
波紋效果學習完了，是不是感覺很簡單呢，波紋效果運用場景很多，比如手機的充電影片，海浪影片等等…
學會了怎么去實作波紋效果，大家也可以去發揮自己的想象，動手去實踐一下吧！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/239066.html

標籤：其他

上一篇：html兩種方法來實作tab切換效果

下一篇：robots