视频按钮的过渡效果

视频按钮的过渡效果

这次讲的内容是怎样用css去制作当鼠标移入时视频的按钮会是大是小的过渡效果。首先先看一下完成后的样子，请看以下截图。

现在先看一下HTML部分，请看下面截图。

其实这次的HTML部分还是非常简单的。首先红色线的标签其实就是第一张截图里的放图片的框也是整个的大框架，而黄色线的标签就是第一张截图里的中间白色的圆，那蓝色线的标签那就是第一张截图里的比较黑的那个圆，那还剩下的那个半透明白色圆怎么弄的呢？那其实就是我们接下里要讲的内容啦!接下来说一下css部分，请看接下来的截图。

红色线上的css部分就是第二张截图所画的大框，是非常简单的就是给了一个背景图和给背景图上一个大半透明的白框。而黄色线上的css代码就是第一张截图里的中间的那个白圆。接下来请看下一张css截图。



接下里就是那个偏黑色的圆和那个半透明的白色圆啦，其实那个半透明白色圆就是和偏黑色圆是一个标签的，但是片透明的白色圆是用伪元素做出来的，然后其实就是让那个黑色圆和半透明白色圆鼠标移上去的时候有一个过渡，就是让这两个圆同时变大变小，等到完全消失时再循环以此类推。这样就会有一个视频的过渡效果啦。