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

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

起初想到的是css3的 @keyframes屬性 ，因為這個用的多一些嘛，
比如：你可以用 from…to 來指定樣式——入場動畫和出場動畫

還比如：你可以通過transition實現(xiàn)（ 今天重點 ）

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

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

看起來是不是很生硬。我們再看一下加上 transition 的效果：
 

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

<div id="container">
  <img src="./little_boy.jpg" />
  <span>大家好呀！我是誰你猜？</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 偽類，通過 transform 屬性設(shè)置容器放大效果
（2）設(shè)置容器的 transition 屬性，屬性值為 transform 以及其動畫時長

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

最新評論