用css做出移动变化的图标

我们经常会在浏览网页中发现会有很多图标或者图片会跟着我们鼠标的移动变换位置和大小，今天小编就教大家如何用css做出这个效果👇

 首先我们在webstorm上的body里面建一个div（不知道的可以看我上一条博客），然后在head内添加一个style标签（也可以新建一个stylesheet.css  在里面写css样式， 在这里我就直接在style里面写css样式）

1、首先给这个div一个大小和背景色

div{

witdh:100px;

height:100px;

background:#399;

border-radius:50%(为了美观我们把这个div变成圆形)

}

2、接着我们给它一个绝对定位，然后设置它的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、接着我们开始写鼠标移入时，你的div开始移动，这时我们需要用到伪类：hover,这个属性是鼠标移入时，它的对象是div 所以是div：hover，我们将它设置为向左100px，然后变大50px，

div:hover{

left:100px;

width:150px;

height:150px;

}

然后我们的可以移动的小图标就做好了，我们下周周见，byebye~