我們經(jīng)常會在瀏覽網(wǎng)頁中發(fā)現(xiàn)會有很多圖標(biāo)或者圖片會跟著我們鼠標(biāo)的移動變換位置和大小，今天小編就教大家如何用css做出這個效果??

?首先我們在webstorm上的body里面建一個div（不知道的可以看我上一條博客），然后在head內(nèi)添加一個style標(biāo)簽（也可以新建一個stylesheet.css? 在里面寫css樣式， 在這里我就直接在style里面寫css樣式）

1、首先給這個div一個大小和背景色

div{

witdh:100px;

height:100px;

background:#399;

border-radius:50%(為了美觀我們把這個div變成圓形)

}

2、接著我們給它一個絕對定位，然后設(shè)置它的top值和left值

div{

witdh:100px;

height:100px;

background:#399;

border-radius:50%(為了美觀我們把這個div變成圓形)

position:absolute;

top:0;

left:0;

}

3、接著寫他的移動時間和方式

div{

witdh:100px;

height:100px;

background:#399;

border-radius:50%(為了美觀我們把這個div變成圓形)

position:absolute;

top:0;

left:0;

translation：all(選中) ? 2s（時間） ?? linear（方式：線性勻速）;

}

4、接著我們開始寫鼠標(biāo)移入時，你的div開始移動，這時我們需要用到偽類：hover,這個屬性是鼠標(biāo)移入時，它的對象是div 所以是div：hover，我們將它設(shè)置為向左100px，然后變大50px，

div:hover{

left:100px;

width:150px;

height:150px;

}

然后我們的可以移動的小圖標(biāo)就做好了，我們下周周見，byebye~