文章標(biāo)題為啥是“仿放大鏡”？
因?yàn)槲医裉煲f(shuō)的，并不是像一般說(shuō)的，鼠標(biāo)移入時(shí)旁邊彈出一個(gè)局部的大圖，那很好寫(xiě)，也沒(méi)多少技巧（用相對(duì)定位定位父元素（或說(shuō)：原圖），絕對(duì)定位定位局部大圖（目的：讓它處于原圖旁邊某位置），在旁邊用css控制樣式并用鼠標(biāo)事件監(jiān)聽(tīng)，，，當(dāng)然，你也可以直接用jQuery中的接口——$(‘類(lèi)名’).jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:‘reverse’;})最后的Type定義了放大鏡類(lèi)型）

好了，言歸正傳，我今天要說(shuō)的是 鼠標(biāo)移入時(shí)圖片在原位置放大 的動(dòng)畫(huà)！
沒(méi)錯(cuò)，就是動(dòng)畫(huà)。（如下：從某網(wǎng)站摳圖）

起初想到的是css3的 @keyframes屬性 ，因?yàn)檫@個(gè)用的多一些嘛，
比如：你可以用 from…to 來(lái)指定樣式——入場(chǎng)動(dòng)畫(huà)和出場(chǎng)動(dòng)畫(huà)

還比如：你可以通過(guò)transition實(shí)現(xiàn)（ 今天重點(diǎn) ）

先知：CSS3屬性transform——（旋轉(zhuǎn):rotate,縮放:scale,傾斜:skew,移動(dòng):translate）

例如：
元素正常寬度是 100px，鼠標(biāo)經(jīng)過(guò)時(shí)寬度變?yōu)?200px。
如果只設(shè)置寬度值，效果如下圖：

看起來(lái)是不是很生硬。我們?cè)倏匆幌录由?transition 的效果：
 

看了兩個(gè)效果的差別，就大概明白 transition 屬性的作用了吧。本例目標(biāo)和寬度變化類(lèi)似，只不過(guò)是換了一個(gè)最終效果。請(qǐng)繼續(xù)往下看詳細(xì)代碼：

<div id="container">
  <img src="./little_boy.jpg" />
  <span>大家好呀！我是誰(shuí)你猜？</span>
</div>

#container {
  margin: 200px;
  position: relative;
  width: 300px;
  height: 300px;
  background-color: greenyellow;
  transition: transform .5s ease-out;
}

#container img {
  width: 100%;
  height: 100%;
}

#container span {
  position: absolute;
  top: 0;
  left: 0;
  margin: 6px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  color: white;
  text-align: center;
}

#container:hover {
  transform: scale(1.3);
}

解析：
（1）添加容器的 hover 偽類(lèi)，通過(guò) transform 屬性設(shè)置容器放大效果
（2）設(shè)置容器的 transition 屬性，屬性值為 transform 以及其動(dòng)畫(huà)時(shí)長(zhǎng)

到此這篇關(guān)于css3中仿放大鏡效果的幾種方式原理解析的文章就介紹到這了,更多相關(guān)css3仿放大鏡內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論