本篇文章給大家分享的是有關使用CSS3怎么實現(xiàn)一個粒子動畫效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

在沁源等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站設計、網(wǎng)站建設 網(wǎng)站設計制作按需搭建網(wǎng)站,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站制作,營銷型網(wǎng)站,外貿(mào)網(wǎng)站制作,沁源網(wǎng)站建設費用合理。

按鈕點擊粒子動畫

<div class="button">
  <div class="button-text">確認</div>
</div>

由于按鈕是梯形的，之前代碼在button選擇器上面已經(jīng)加了偽類來實現(xiàn)梯形了，所以我們只能再套一層元素（button-text）來實現(xiàn)粒子。

.button-text {
  position: relative;
  width: 100%;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.button-text:before, 
.button-text:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  background-repeat: no-repeat;
}
.button-text:before {
  display: none;
  top: -75%;
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    10% 10%, 
    20% 20%, 
    15% 15%, 
    20% 20%, 
    18% 18%, 
    10% 10%, 
    15% 15%, 
    10% 10%, 
    18% 18%;
}
.button-text:after {
  display: none;
  bottom: -75%;
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    15% 15%, 
    20% 20%, 
    18% 18%, 
    20% 20%, 
    15% 15%, 
    10% 10%, 
    20% 20%;
}
.button-text:active {
  transform: scale(0.9);
}

在button-text 的偽類元素上面，添加background-image ,并用徑向漸變radial-gradient 畫出多個圓作為粒子。

transform: scale(0.9) ，是鼠標點擊時，縮放button-text 元素。

大家應該都看到默認偽類元素是display: none; 隱藏的。所有當我們點擊時，需要添加一個選擇器，讓其顯示出來，并執(zhí)行動畫。

js來監(jiān)聽點擊事件，點擊后添加animate 選擇器。

var animateButton = function(e) {
  e.preventDefault;
  e.target.classList.remove('animate');
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var classname = document.getElementsByClassName("button-text");
for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', animateButton, false);
}

然后我們添加CSS，開始動畫

.button-text.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.button-text.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
    background-position: 
      5% 90%, 
      10% 90%, 
      10% 90%, 
      15% 90%, 
      25% 90%, 
      25% 90%, 
      40% 90%, 
      55% 90%, 
      70% 90%;
  }
  50% {
    background-position: 
      0% 80%, 
      0% 20%, 
      10% 40%, 
      20% 0%, 
      30% 30%, 
      22% 50%, 
      50% 50%, 
      65% 20%, 
      90% 30%;
  }
  100% {
    background-position: 
      0% 70%, 
      0% 10%, 
      10% 30%, 
      20% -10%, 
      30% 20%, 
      22% 40%, 
      50% 40%, 
      65% 10%, 
      90% 20%;
    background-size: 
      0% 0%, 
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 
      10% -10%,
      30% 10%,
      55% -10%,
      70% -10%,
      85% -10%,
      70% -10%,
      70% 0%;
  }
  50% {
    background-position: 
      0% 80%,
      20% 80%,
      45% 60%,
      60% 100%,
      75% 70%,
      95% 60%,
      105% 0%;
  }
  100% {
    background-position: 
      0% 90%,
      20% 90%,
      45% 70%,
      60% 110%,
      75% 80%,
      95% 70%,
      110% 10%;
    background-size: 
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
}

我們通過background-position 改變背景的位置，用background-size 改變大小，來形成動畫效果。

這樣就形成按鈕點擊粒子動畫效果了。

同理，我們可以在背景上面添加同樣的粒子效果。代碼基本可以copy。

背景粒子效果

.king:before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  background-repeat: no-repeat;
  opacity: 0.4;
}
.king:before {
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    10% 10%, 
    12% 12%, 
    5% 5%, 
    12% 12%, 
    5% 5%, 
    10% 10%, 
    5% 5%, 
    10% 10%, 
    5% 5%;
  display: block;
  animation: topBubbles ease-in-out 3s forwards infinite;
}

以上就是使用CSS3怎么實現(xiàn)一個粒子動畫效果，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：使用CSS3怎么實現(xiàn)一個粒子動畫效果-創(chuàng)新互聯(lián)
文章位置：http://www.aaarwkj.com/article34/jcdpe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、面包屑導航、Google、ChatGPT、關鍵詞優(yōu)化、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)