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