鼠标悬停阴影遮盖效果

开发工具与关键技术：DW与css

作者：戴怡斌 

撰写时间：2019年4月22日

下面我们来看一个鼠标移入阴影遮盖，鼠标移出阴影消失的列子，用处广不广不知道，但是学会了也是挺好的，

难度对于学过的来说看一眼应该就会了，这是我的看法，没学过还是有一点难度的，但也很好学的。

这里面没有js部分，一点都没有，重点就只有css3部分，废话不多说

整个案列只有这一点HTML代码，因为重点不是这里

设置宽高就不说了，因为都知道，也没什么好说的，先看效果图

position: relative;定位值有三种，固定定位：fixed，相对定位：relative，
绝对定位：absolute，定位可能有些搞不清楚来说明一下
relative：意思就是在你浏览器最左上角开始定位

absolute：意思就是相对于它的第一个父元素进行定位。不知道父元素的去问度娘。

fixed：意思就是相对于浏览器的窗口进行定位，通俗的讲就是固定住了，不管屏幕怎么滚动，他还是在那。

ransform的值有：旋转、缩放、移动或倾斜，案列中用到的是倾斜，

transition的值也是四个，第三个是曲线，就不在这里一一列举。

transition-delay是当你鼠标移入后，你设置1秒它就一秒钟后再执行

transition-duration：整个过程所需要的时间。

transition-property是你css的名称。

四个值都有默认值，不去写它就自动默认，不过名称还是要写的

.xiaoyang:hover .over{left: -30%;}，这句代码的意思是当我鼠标移到照片上时，阴影向左移动多少自己根据自己的情况设置。

伪类的意思是在鼠标移到元素上时想此元素添加某些特殊样式

主要了解transform，transition和伪类就能很好理解了。

最后送上鼠标移入后的效果