头像的过渡效果

头像的过渡效果

这次讲的内容是怎么样给头像添加一个的样式。首先先看一下框架HTML部分，请看以下截图。

这就是这次内容的HTML部分，接下来会有一张对应这张HTML里面的标签的下面颜色的图，这张图里面有一个名为“box”的标签没有给颜色，是因为这个标签暂时看不见，移上去才有效果在后面的内容我会讲到的。接下来请看下面的截图。

这张图里的颜色就是对应HTML部分里面的标签下面的颜色，大家可以看一下。这张图大概就是给完初始样式的样子。接下来就开始说css部分啦。

我是先给这个网页设置了一个背景，再给“jlsd”一些简单的样式，重点就是“jlsd”里的“img”的定位。接下来继续看别的css部分。

这张图的css内容就是第二张图里面的那两个小圆，也是一些位置的样式还有就是再给了一个“transition”的过渡，给了一个速度的调整。到现在的话大概静态的内容说完了，接下来就是一个移上去会出现的动态效果。看接下来的截图。

这张图的css内容首先就是给第二张图里面的那两个小圆一个颜色的变换，这样移上去颜色就会有变色。下面就是前面说过的那个看不见的那个“div”了，为什么说看不见呢？因为我给了“opacity”这个属性并且把它调为0了，所以看不见。样式大概就是给了一个绝对定位还有一个过度属性，也是把速度调慢了一些。然后让它移上去它的比例会发生一些变化，然后透明度也为半透明的状态。这样就会达到一种好像在聚集的感觉。具体请看源文件