鼠标悬停阴影遮盖效果

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

做者：戴怡斌 

撰写时间：2019年4月22日

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

难度对于学过的来讲看一眼应该就会了，这是个人见解，没学过仍是有一点难度的，但也很好学的。css3

这里面没有js部分，一点都没有，重点就只有css3部分，废话很少说web

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

设置宽高就不说了，由于都知道，也没什么好说的，先看效果图
浏览器

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

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

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

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

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

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

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

transition-property是你css的名称。

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

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

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

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

最后送上鼠标移入后的效果
开发工具