头像的过渡效果
这次讲的内容是怎么样给头像添加一个的样式。首先先看一下框架HTML部分,请看以下截图。
这就是这次内容的HTML部分,接下来会有一张对应这张HTML里面的标签的下面颜色的图,这张图里面有一个名为“box”的标签没有给颜色,是因为这个标签暂时看不见,移上去才有效果在后面的内容我会讲到的。接下来请看下面的截图。
这张图里的颜色就是对应HTML部分里面的标签下面的颜色,大家可以看一下。这张图大概就是给完初始样式的样子。接下来就开始说css部分啦。
我是先给这个网页设置了一个背景,再给“jlsd”一些简单的样式,重点就是“jlsd”里的“img”的定位。接下来继续看别的css部分。
这张图的css内容就是第二张图里面的那两个小圆,也是一些位置的样式还有就是再给了一个“transition”的过渡,给了一个速度的调整。到现在的话大概静态的内容说完了,接下来就是一个移上去会出现的动态效果。看接下来的截图。
这张图的css内容首先就是给第二张图里面的那两个小圆一个颜色的变换,这样移上去颜色就会有变色。下面就是前面说过的那个看不见的那个“div”了,为什么说看不见呢?因为我给了“opacity”这个属性并且把它调为0了,所以看不见。样式大概就是给了一个绝对定位还有一个过度属性,也是把速度调慢了一些。然后让它移上去它的比例会发生一些变化,然后透明度也为半透明的状态。这样就会达到一种好像在聚集的感觉。具体请看源文件