摘要：
实现效果如下： 观察发现鼠标放上去的时候出现了三个变化，渐变背景，文字位移和图片放大。 渐变背景：background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景 阅读全文
摘要：
缩放：transform:scale(倍数); 实现hover的时候加载播放图标，具体效果如下： 首先需要创建一个大盒子，盒子上面部分用一个div来呈放图片，下面部分直接书写文字。观察发现播放图标是存在于上部图片的居中位置，所以可以考虑在上面部分加上after伪元素然后通过定位的方式居中在图片的中间 阅读全文
摘要：
transform可以用于实现位移，旋转，缩放等效果。 位移：transform: translate(水平距离,垂直距离); 这里先借助其位移属性实现双开门的效果，鼠标hover的时候最上面的图片向两边展开，鼠标离开的时候恢复原状。 先定义一个盒子呈放底层的图片，在分别定义两个元素去添加背景图片， 阅读全文