2017-百度前端技术学院编码任务： 鼠标悬浮模糊效果
DEMO
项目源码
这个任务主要是学习和使用 CSS3 大部分的属性，主要使用的属性如下：
其实刚开始，我就在结构上面犯了错误。如果把图片作为背景图片使用，当使用 filter 模糊效果的时候，任何子元素都会产生模糊效果，那么后面文字和边框都是模糊不清的，所以应该采用单独使用图片元素 img 来显示背景图片。
首先设置背景图片为线性渐变 linear-gradient ，设置方向为从左到右并且设置2段相同的颜色节点，0%和100%为相同的颜色，这样才可以更好的实现文字流光的效果。
渐变的方向其实是通过设置角度来控制，角度是通过水平线和渐变线之间产生的。默认方向从下到上就是 0deg 、从左到右就是 90deg 。
我们发现整个背景都是渐变色，我们只是需要文字的颜色变为渐变而已。我们开始利用 -webkit-background-clip 属性来背景剪裁为文字，同时设置文字的 -webkit-text-fill-color 或者 color 属性让其文字颜色为透明色，这样才有让文字显示为渐变色。
这里需要注意的是：背景裁剪为文字当前只有webkit内核浏览器支持，同时设置-webkit-text-fill-color和color，那么前者会覆盖后者属性值。
另外我们需要设置 background-size: 200% 100%，因为渐变颜色设置为2段相同的颜色节点，目的是为了重复2段相同的颜色，实现动画文字流光效果。
目前就差动画了，首先需要设置动画规则 keyframes ，然后设置 animation 动画周期时间、速度曲线和播放次数。因为背景长度为200%，所以动画规则设置 100% {background-position: -100% 0} ，让其沿着X轴变化从而产生流动效果。
到此文字流光效果实现了
背景图模糊处理是设置 filter: blur(3px)，CSS3的filter(滤镜) 属性主要是针对图片进行处理，比如黑白、对比和亮度等等。
这样背景模糊的效果就实现了。
刚开始没什么思路，后来搜索才知道通过伪元素 ::before 和 ::after 可以实现这样的效果。思路是通过绝对定位设置前后伪元素来显示上下和左右边框，设置元素上下边框的伪元素 left：50% ，左右 top：50% ，通过改变其定位、宽度和高度来实现效果。
隐藏和显示是通过设置 opacity 属性来实现,初始状态为0，鼠标滑动为1来实现。
CSS3的许多新特效非常酷炫，可以实现非常复杂的效果和动画，值得大家好好看看。
当我想鼠标移动到a元素上面时产生手指效果，但是却发现无效。通过排查是伪元素覆盖在a元素上面，导致根本无法接触。那么怎么能改变其它们的层叠关系呢？我想到了 z-index 属性，因为这个问题我重新学习了z-index属性的使用。
对于一个已经定位的元素（即position属性值是非static的元素)
我们现在div(A)和div(B)中再分别创建一个小的div(c)和div(d)
我们试试把div(A)的Z-index设置成auto。
再试试只把div(a)设置为auto
其实主要是找到对比元素之间的基准堆叠上下文，以此数字越大层级越高。
取值：
auto : 元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。
<integer>: 整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。
通俗说，设置auto时元素堆叠等级和父元素一样，遇到堆叠上下文之后根据大小来判断层级。设置具体数字的元素同样遇到堆叠上下文根据大小来判断层级，它的子元素和外界元素进行比较时,采用父元素的Z-index进行比较, 和兄弟元素比较采用自身的Z-index。
CSS3的许多新特效非常酷炫，可以实现非常复杂的效果和动画，值得大家好好看看。
首先我们创建一个html文件，写出html文件的一些基础代码然后我们在网页中新建一个div，并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，
接下来我们使用下面的代码去除标签的格式，其中：list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示，并且为左浮动margin-right:20px表示设置标签右外边距
刷新浏览器中html文件查看效果，
这里我们开始添加动画：
给
标签添加：
transition:transform 0.1s
transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hover{cursor:pointertransform:translate(0,-10px)}
cursor:pointer表示鼠标滑过显示为小手形状
transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，
进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：
