vue.js實現(xiàn)點擊圖標(biāo)放大離開時縮小的代碼
上篇文章給大家介紹了vue實現(xiàn)裁切圖片同時實現(xiàn)放大、縮小、旋轉(zhuǎn)功能 ,今天給大家介紹vue.js實現(xiàn)點擊圖標(biāo)放大離開縮小功能,具體代碼如下所示:
@-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; }
到此這篇關(guān)于vue.js實現(xiàn)點擊圖標(biāo)放大離開時縮小的代碼的文章就介紹到這了,更多相關(guān)vue實現(xiàn)點擊圖標(biāo)放大離開縮小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue點擊彈窗自動觸發(fā)點擊事件的解決辦法(模擬場景)
- vue中實現(xiàn)點擊空白區(qū)域關(guān)閉彈窗的兩種方法
- Vue實現(xiàn)點擊當(dāng)前行變色
- vue3.0實現(xiàn)點擊切換驗證碼(組件)及校驗
- 詳解vue中在父組件點擊按鈕觸發(fā)子組件的事件
- Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作
- vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作
- vue實現(xiàn)點擊出現(xiàn)操作彈出框的示例
- vue用ant design中table表格,點擊某行時觸發(fā)的事件操作
- vue實現(xiàn)水波漣漪效果的點擊反饋指令
相關(guān)文章
element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼
最近寫項目的時候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實現(xiàn)上傳多張圖片的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解
這篇文章主要為大家介紹了使用antv替代Echarts實現(xiàn)數(shù)據(jù)可視化圖表詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08Vue3+X6流程圖實現(xiàn)數(shù)據(jù)雙向綁定詳解
這篇文章主要為大家詳細介紹了Vue3如何結(jié)合X6流程圖實現(xiàn)數(shù)據(jù)雙向綁定,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03vue開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題(附實例)
最近了解到mqtt這樣一個協(xié)議,可以在web上達到即時通訊的效果,下面這篇文章主要給大家介紹了關(guān)于VUE3+mqtt封裝解決多頁面使用需重復(fù)連接等問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04使用vue-router與v-if實現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09