Vue3 + CSS實現(xiàn)一個噴火龍動畫效果

更新時間：2024年02月07日 08:49:33 作者：覓跡

不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實現(xiàn)一個噴火龍的動畫效果,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手嘗試一下

前言

人生天地之間，若白駒過隙，忽然而已。不知不覺中，2023年已然逝去了。

挺久前就關(guān)注到龍年春節(jié)創(chuàng)意投稿大賽了，初步想法是畫一條龍，不過實踐起來有點難度，加上之前沒畫過類似的，遂放棄...

后來，想著用 Vue3 + CSS 實現(xiàn)一個噴火龍的動畫效果吧，于是有了這篇文章。

最終效果如下所示：

搜集素材

從網(wǎng)上找了一張龍的圖片（可愛點的），用PS將背景處理成透明的。類似地，找了一個透明背景的彈窗圖片。

最后，還要準(zhǔn)備一張背景圖片。

設(shè)置滾動背景

這里添加一個背景元素<div class="bg"></div>，設(shè)置樣式：

.bg{
  width: 3900px;
  height: 100vh;
  background-color: #348cb2;
  background-image: url('https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/147d616a42d346289a5756959117d8b0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1500&h=500&s=238027&e=jpg&b=348cb2');
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 1300px auto;
}

這里設(shè)置一張背景圖片，其寬度1300px、橫向重復(fù)，并設(shè)置整個背景元素的寬3900px、高100vh，超出圖片的部分設(shè)置背景色 #348cb2。

為了讓背景圖片動起來（看起來是龍在動...），我們添加animation動畫，設(shè)置transform屬性從-1300px到0px，間隔是60s，并不斷循環(huán)。

.bg{
  animation: bg 60s linear infinite;
}
@keyframes bg {
  from {
    transform: translate3d(-1300px,0,0)
  }
  to {
    transform: translate3d(0,0,0)
  }
}

最終效果如下：

噴火效果

如何實現(xiàn)一個龍噴火的效果呢？

核心是定義了200個.ball元素，背景色是 #fa8763，每個.ball 設(shè)置向上運(yùn)動的動畫，位置隨機(jī)，并設(shè)置mix-blend-mode: screen;使得火焰的效果更逼真。同時，對于外層 .fire-box 元素，設(shè)置旋轉(zhuǎn)90°以及filter: blur(2px) contrast(20);屬性優(yōu)化火焰的顯示效果。

效果如下：

代碼如下：

<div class="fire-box" v-show="showFire">
  <div class="fire">
    <div v-for="(num, i) in 200" :key="i" class="ball"></div>
  </div>
</div>
?
?
<style>
$count: 200;
?
@for $i from 1 to $count {
  .ball:nth-child(#{$i}) {
    $width: #{random(50)}px;
    width: $width;
    height: $width;
    left: calc(#{(random(70))}px - 55px);
  }
  .ball:nth-child(#{$i}) {
    animation: movetop 1s linear -#{random(3000)/1000}s infinite;
  }
}
?
@keyframes movetop {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(0, 0);
  }
  87.7% {
    transform: translate(0, -170px);
    opacity: 0;
  }
  100% {
    transform: translate(0, -170px);
    opacity: 0;
  }
}
    
?
.fire-box {
  width: 100px;
  height: 300px;
  position: absolute;
  bottom: 200px;
  left: 50%;
  margin-left: -290px;
  transform: rotate(-90deg);
  filter: blur(2px) contrast(20);
  .fire {
    position: absolute;
    top: 30px;
    left: 50%;
    border-radius: 45%;
    box-sizing: border-box;
    border: 120px solid transparent;
    border-bottom: 120px solid transparent;
    transform: translate(-50%, 0) scaleX(.45);
    .ball {
      position: absolute;
      top: 60px;
      transform: translate(0, 0);
      background: #fa8763;
      border-radius: 50%;
      z-index: -1;
      mix-blend-mode: screen;
    }
  }
}
</style>

畫龍

添加龍的圖片，并設(shè)置其居中顯示。

<img
  src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15b3cb91006646df931927699603ec09~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=688&h=722&s=378680&e=png&a=1&b=5d8017"
  alt=""
  class="dragon"
  @mouseover="handleShowFire"
/>
?
<style>
.dragon{
  width: 250px;
  height: 250px;
  position: fixed;
  bottom: 200px;
  left: 50%;
  margin-left: -125px;
}
</style>

添加動畫效果

我們監(jiān)聽鼠標(biāo)的 mouseover 事件，當(dāng)鼠標(biāo)懸浮到龍上時，觸發(fā)動畫效果：

彈出提示框。
龍左右搖晃噴火。

這里設(shè)置了一個定時器timer，在鼠標(biāo)懸浮時觸發(fā)定時器，顯示動畫效果，并在3s后清除定時器以去除動畫效果。

代碼如下：

<img
  src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15b3cb91006646df931927699603ec09~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=688&h=722&s=378680&e=png&a=1&b=5d8017"
  alt=""
  class="dragon"
  :class="[{'shake': showFire}]"
  @mouseover="handleShowFire"
/>
<div class="tips" v-show="showFire">
  <div class="txt">{{tips}}</div>
</div>
?
<script>
const showFire = ref(false)
const duration = 3000
let timer = null
?
const handleShowFire = () => {
  showFire.value = true
  if(showFire.value) {
    if(timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      showFire.value = false
    }, duration)
  }
}
</script>

樣式設(shè)置如下：

.shake{
  animation: shake 1s infinite;
}
?
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotateY(3deg); }
  75% { transform: translateX(10px) rotateY(-3deg); }
  100% { transform: translateX(0); }
}
?
.tips{
    background: url('https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4c2cc65b824c48edb2530bc1d993f796~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=233&h=154&s=9297&e=png&a=1&b=fafafa') center / cover no-repeat;
    width: 130px;
    height: 65px;
    position: absolute;
    bottom: 450px;
    left: 50%;
    margin-left: -50px;
    user-select: none;
    animation: zoom 1s infinite;
    .txt{
      position: absolute;
      top: 18px;
      left: 15px;
      white-space: nowrap;
      color: #f00;
      font-weight: 600;
      font-size: 12px;
    }
  }
?
  @keyframes zoom {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }
}

最終效果如下所示：