News Contents
信息中心

實現鼠標 hover 元素中心點放大效果,平滑放大,逐漸放大,慢慢放大

發表日期:2020/6/9      瀏覽次數:

對于之前實現鼠標 hover 元素從隱藏到出現的方法常用的有兩種:

1.通過display:none;或者 visibility:hidden;來實現元素的隱藏,而通過設置被 hover 元素 display:block;或者 visibility:visible;來實現元素的重新顯示。
2.通過設置寬或者高為 0 來實現元素隱藏,而通過重新設置被 hover 元素的寬高來實現元素的顯示。

第一種方式無法實現動態的顯示效果,而第二種方式可以實現較美觀的動態效果,只需設置 transition:all  .3s;即可。

但是,通過實踐發現:若要實現從中心平滑放大的效果,第二種方式怎么也做不到那種平滑的效果。

通過第二種方式傳統定位實現的,hover圖片放大,不是從中心點放大,而是以左上角為起始位置向右下角方向延伸放大,這不是我們想要的效果。

那么,以此為基礎作出假設若要實現從中心點的放大是不是只要將被 hover 的元素,居中就行了呢?

然而通過強制修改被 hover 元素的定位,在 hover 中將其設置居中,并不能實現想要的效果,元素依然從左上角向右下角延伸放大,只是在放大的過程的有一個位置的跳躍,跳躍到中間罷了,過渡非常生硬。

那么,如何才能實現鼠標 hover 元素中心點 “平滑” 放大效果呢?

傳統的改變寬高的方式是行不通的,這時候需要用到 transform 屬性,通過設置 transform: scale(1.2); 來實現中心放大的效果,當然其中的數值可以自己設置。


下面我分別給兩個圖片設置定位,一個是左上角定位,一個是居中定位(實現效果如下圖)

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .div_1{
            display: inline-block;
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            position: relative;
        }
        .img1{
            width: 400px;
            height: 320px;
            position: absolute;
            left: 0;
            top: 0;
            transition: all .4s;
            cursor: pointer;
        }
        .img1:hover{
            zoom:1;
            transform: scale(1.2);
        }
        .div_2{
            display: inline-block;
            width: 500px;
            height: 500px;
            border: 1px solid yellow;
            position: relative;
        }
        .img2{
            width: 400px;
            height: 320px;
            position: absolute;
            top: 0;right: 0;bottom: 0;left: 0;
            margin: auto;
            transition: all .4s;
            cursor: pointer;
        }
        .img2:hover{
            zoom:1;
            transform: scale(1.2);
        }    </style></head><body>
    <div class="div_1">
        <img class="img1" src="hy.jpg" alt="">
    </div>
    <div class="div_2">
        <img class="img2" src="hy.jpg" alt="">
    </div></body></html>





盛大建站承接個人、公司、企業的網站建設、網頁設計、網店制作、獨立商城制作、外貿網站制作,也承接同行介紹的業務,歡迎聯系!
本站承接主要業務如下:
1、提供免備案虛擬主機(網站空間),有獨立國內服務器、高速美國服務器、香港服務器、韓國服務器、日本服務器,>> http://www.fuanxx.com
2、網站建設:個人網店制作、企業建站、公司網站、新聞、下載等;論壇、博客網站搭建,承接外貿英文站制作
3、承接阿里巴巴、京東、淘寶、天貓等的商品數據采集
4、網站防釣魚,可以過360、QQ、搜狗、金山、微信攔截
5、要就發IP網站限制訪問系統,防止同行抄襲并保障海外客戶訪問不受影響,>> http://www.198ip.com
  下一篇:沒有了!
十年如一日,我們專注于提供高品質 定制網站建設服務!
您的信任,我們的責任,期待與您的合作!
幸运飞艇开奖号码网