vue.js實現點擊圖標放大離開時縮小的代碼
更新時間：2021年01月27日 16:22:37 作者：側耳傾聽...
這篇文章主要介紹了vue.js實現點擊圖標放大離開時縮小，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
上篇文章給大家介紹了vue實現裁切圖片同時實現放大、縮小、旋轉功能 ，今天給大家介紹vue.js實現點擊圖標放大離開縮小功能，具體代碼如下所示：
@-webkit-keyframes pulse1 {
from {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} */
}
@keyframes pulse1 {
from {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
/* to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} */
}
.pulse1 {
-webkit-animation-name: pulse1;
animation-name: pulse1;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
/* to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} */
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
to {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
/* to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
} */
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
.animate1 {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
到此這篇關于vue.js實現點擊圖標放大離開時縮小的代碼的文章就介紹到這了,更多相關vue實現點擊圖標放大離開縮小內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
element plus中el-upload實現上傳多張圖片的示例代碼
最近寫項目的時候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實現上傳多張圖片的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決
這篇文章主要給大家介紹了關于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了使用antv替代Echarts實現數據可視化圖表詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Vue中的數據驅動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家詳細介紹了Vue3如何結合X6流程圖實現數據雙向綁定,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
vue開發(fā)中后臺系統(tǒng)復雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
VUE3+mqtt封裝解決多頁面使用需重復連接等問題(附實例)
最近了解到mqtt這樣一個協(xié)議,可以在web上達到即時通訊的效果,下面這篇文章主要給大家介紹了關于VUE3+mqtt封裝解決多頁面使用需重復連接等問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了Vue實現數據請求攔截，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了Vue Echarts實現儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-12-12
使用vue-router與v-if實現tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現tab切換的思考,需要的朋友可以參考下2018-09-09