CSS-hover-transform

利用CSS添加元素縮放效果,讓網頁更加動人!

 

 

這篇也是想說要寫很久了,好一段時間才想到
這個主題的目的是:利用CSS語法,當游標移到元素上,元素會有放大的效果
具體做法是使用 transform 這個屬性的 scale(X,Y) 函式
其中X是橫向縮放X倍數,Y則是縱向縮放Y倍數
語法如下:

.元素class:hover{
            transform:scale(1.25,1.25);
            }

當然了,要記得將該元素的添加 :hover 的條件
在上面{}的中,我將X、Y值都設為1.25,意思就是當游標移到該元素時,此元素會橫向、縱向各放大1.25倍
X、Y可以改成任意數值

好了,你以為這樣就結束了嗎?當然不是!
在元素能夠縮放之後,我們還要加入動畫的速度,畢竟元素突然放大,總會有股頓挫感
此時能夠讓動畫平順一點,看著也比較舒服
這邊要用到的是 transition 這個屬性,作法如下:

transition:transform 0.25s ease;

我們利用transition這個轉場的屬性,設定transform的過渡時間為 0.25秒
這段融合上面那段就變為:

.元素class:hover{
            transform:scale(1.25,1.25);
            transition:transform 0.25s ease;
            }

怎麼樣?是不是很簡單呢!
趕快去試試看吧,將來我會分享更多進階的屬性以及用法,請大家繼續期待吧!

歡迎留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top