2021-02-27

人物头像过渡

首先我们看一下初始样式：

接着看我们完成的最终效果：

然后来看看HTML的布局：

一个大的div包裹着俩个p标签，一个img标签，一个小div标签；
这些标签的意义分别是：
大的div就是最外层的白色大圆，第一个p标签就是上面蓝色的小圆，第二个p标签就是下面有个黄色的小圆，img标签就是里面那个薛之谦头像，最后一个div就是那层半透明的绿色圆；

现在我们就看看css部分：

因为初始样式大多数是白色，所以我们要将背景颜色换个颜色，以至于比较好区分，直接给body一个背景颜色为#cccccc（灰色）；

现在就是看看那个大div的样式：

给一个相对定位，方便设置后面元素的位置，宽为350px，高350px，外边距：上下为100px 左右居中，背景颜色为白色，圆角为50%；

现在我们看上边那个小圆的样式：

宽为80px，高为80px，向左浮动，背景颜色#ffffff（白色），圆角50%，外边距：上下-26px 左右130px，
transition：（选择全部的元素）all表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）0.5s该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式）linear 即“缓冲函数”，指过渡效果的时间曲线；

现在我们看下边那个小圆的样式：

宽为120px，高为120px，向右浮动，背景颜色#ffffff（白色），圆角50%，外边距：上下220px 左右33px，
transition：（选择全部的元素）all表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）0.5s该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式）linear 即“缓冲函数”，指过渡效果的时间曲线

现在我们看img的样式：

宽为320px，高为320px，向左浮动，外边距：上下为15px 左右为-325px，圆角为50%，给一个绝对定位；

现在来看半透明的绿色圆：

宽为400px，高为400px，圆角为50%，背景颜色为绿色，给一个绝对定位，左为-25px，上为-24px，透明度为0，
transition：（选择全部的元素）all表示的是所有初始状态设置了样式的属性 transition-duration （过渡时间）0.5s该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间 transition-timing-function（过渡过程的样式）linear 即“缓冲函数”，指过渡效果的时间曲线；

现在看当鼠标移入大div时俩个小圆的样式变化：

上边那个小圆，当鼠标移入大div时，背景颜色变成蓝色，
上下那个小圆，当鼠标移入大div时，背景颜色变成黄色，

现在看当鼠标移入大div时半透明绿色圆的样式变化：

Transform：按比例缩小到0.8，透明度为0.5，背景颜色为绿色；

总结：

一开始是最外层的白色大圆个包裹了薛之谦的头像，然后上面白色的小圆，下面有个白色的小圆，最上面就是有那层半透明的绿色圆，但是鼠标没移入时绿色圆的透明度为0；当鼠标移入时，然后上面白色的小圆变成蓝色，下面有个白色的小圆变成黄色，那层半透明绿色圆的透明度就变成了0.5。