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的许多新特效非常酷炫，可以实现非常复杂的效果和动画，值得大家好好看看。
特殊字体一般不是说不能添加，而是考虑到用户电脑上预装的字体有限，所以局限在宋体和微软雅黑两种字体，css属性中有个font属性，例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果，但是再没有装过的电脑可能就是其它字体了，一般会解析为宋体，问题解决一般由两种解决方案。第一：css3下载字体，代码如下
@font-face
{
font-family:
'自己命名字体名字'
src:
url('字体路径')
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg')
font-style:
normal
font-weight:
normal
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字"}
不兼容ie8及以下浏览器
第二：切png图片
