標籤：

css3實現滑鼠移上去放大效果

07-14
css3實現滑鼠移上去放大效果

1，最近因公司在用react來做移動端的項目，所以這久寫了很多樣式，於是決定最近寫一些特效，只能算做一種筆記。

2，實現思路最主要是有二張圖片，第二張隱藏，並將其定位，移上去將其顯示，其實就這樣很簡單。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width_=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

.box{

width: 1024px;

height: 600px;

margin: 200px auto;

}

.list{

float: left;

margin-left: 5px;

margin-top: 20px;

position: relative;

margin-bottom: 10px;

}

.box img{

width: 100px;

height: 100px;

border: 1px solid #000;

padding: 2px;

background: #fff;

display: block;

}

.box img:nth-of-type(2){

width: 200px;

height: 200px;

position: absolute;

top: -50px;

left: -50px;

z-index: 10;

display: none;

}

.list:hover img:nth-of-type(2){

display: block;

}

</style>

</head>

<body>

<div class="box">

<div class="list">

<img src="f12.baidu.com/it/u=3087"/>

<img src="f12.baidu.com/it/u=3087"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="f11.baidu.com/it/u=2465"/>

<img src="f11.baidu.com/it/u=2465"/>

</div>

<div class="list">

<img src="ss0.bdstatic.com/70cFuH"/>

<img src="ss0.bdstatic.com/70cFuH"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="f12.baidu.com/it/u=3087"/>

<img src="f12.baidu.com/it/u=3087"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="f11.baidu.com/it/u=2465"/>

<img src="f11.baidu.com/it/u=2465"/>

</div>

<div class="list">

<img src="ss0.bdstatic.com/70cFuH"/>

<img src="ss0.bdstatic.com/70cFuH"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="f12.baidu.com/it/u=3087"/>

<img src="f12.baidu.com/it/u=3087"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="f11.baidu.com/it/u=2465"/>

<img src="f11.baidu.com/it/u=2465"/>

</div>

<div class="list">

<img src="ss0.bdstatic.com/70cFuH"/>

<img src="ss0.bdstatic.com/70cFuH"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="f12.baidu.com/it/u=3087"/>

<img src="f12.baidu.com/it/u=3087"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="f11.baidu.com/it/u=2465"/>

<img src="f11.baidu.com/it/u=2465"/>

</div>

<div class="list">

<img src="ss0.bdstatic.com/70cFuH"/>

<img src="ss0.bdstatic.com/70cFuH"/>

</div>

<div class="list">

<img src="timgsa.baidu.com/timg?"/>

<img src="timgsa.baidu.com/timg?"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss2.bdstatic.com/70cFvn"/>

<img src="ss2.bdstatic.com/70cFvn"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

<div class="list">

<img src="ss3.bdstatic.com/70cFv8"/>

<img src="ss3.bdstatic.com/70cFv8"/>

</div>

</div>

</body>

</html>

4,自行複製代碼查看效果，一起學習一起成長，我會將我在公司學到的記錄在這裡。


推薦閱讀：

TAG:滑鼠 | 羅技Logictech | 遊戲滑鼠 |