鼠标悬停阴影遮盖效果-蒲公英云

鼠标悬停阴影遮盖效果

Bertha 。 2022-03-17 05:30 633阅读 0赞

开发工具与关键技术：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和伪类就能很好理解了。