Vue3 + CSS實現(xiàn)一個噴火龍動畫效果
更新時間：2024年02月07日 08:49:33 作者：覓跡
不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實現(xiàn)一個噴火龍的動畫效果,文中有相關的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手嘗試一下
前言
人生天地之間，若白駒過隙，忽然而已。不知不覺中，2023年已然逝去了。
挺久前就關注到龍年春節(jié)創(chuàng)意投稿大賽了，初步想法是畫一條龍，不過實踐起來有點難度，加上之前沒畫過類似的，遂放棄...
后來，想著用 Vue3 + CSS 實現(xiàn)一個噴火龍的動畫效果吧，于是有了這篇文章。
最終效果如下所示：
搜集素材
從網(wǎng)上找了一張龍的圖片（可愛點的），用PS將背景處理成透明的。類似地，找了一個透明背景的彈窗圖片。
最后，還要準備一張背景圖片。
設置滾動背景
這里添加一個背景元素<div class="bg"></div>，設置樣式：
.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;
}
這里設置一張背景圖片，其寬度1300px、橫向重復，并設置整個背景元素的寬3900px、高100vh，超出圖片的部分設置背景色 #348cb2。
為了讓背景圖片動起來（看起來是龍在動...），我們添加animation動畫，設置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 設置向上運動的動畫，位置隨機，并設置mix-blend-mode: screen;使得火焰的效果更逼真。同時，對于外層 .fire-box 元素，設置旋轉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>
畫龍
添加龍的圖片，并設置其居中顯示。
<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)聽鼠標的 mouseover 事件，當鼠標懸浮到龍上時，觸發(fā)動畫效果：
- 彈出提示框。
- 龍左右搖晃噴火。
這里設置了一個定時器timer，在鼠標懸浮時觸發(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>
樣式設置如下：
.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);
}
}
}
最終效果如下所示：
后記
總的來說，本文實現(xiàn)的算是比較簡單的動畫效果。
在這里，預祝各位掘友龍年快樂，龍馬精神，龍騰四海！
以上就是Vue3 + CSS實現(xiàn)一個噴火龍動畫效果的詳細內(nèi)容，更多關于Vue3 + CSS噴火龍的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue組件化開發(fā)之通用型彈出框的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue+element下拉列表默認值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關于vue3中輕松實現(xiàn)switch功能組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue中實現(xiàn)子組件接收父組件方法并獲取返回值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue全局攔截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
由于 Vue 會在初始化實例時對 property 執(zhí)行 getter/setter 轉化,所以 property 必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的,這篇文章主要介紹了導致VUE頁面不刷新的問題分析及解決方法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue下拉列表功能實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
本文給大家詳細講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關注意事項做了講述，有興趣的朋友學習下。2018-03-03
在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表
這篇文章主要介紹了在Vue 中實現(xiàn)循環(huán)渲染多個相同echarts圖表，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07