有趣的鼠标悬浮模糊效果总结
任务目的
- 针对设计稿样式进行合理的HTML架构，包括以下但不限于：
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
- 掌握基本的CSS编码，包括以下但不限于：
- 了解CSS的定义、概念、发展简史
- 掌握CSS选择器的含义和用法
- 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式
任务描述
- 实现图示效果（点击查看）
- 实现文字的流光渐变动画
- 背景图需要进行模糊处理
- 实现按钮边框的从中间到两边扩展开
任务注意事项
- 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
- 尽可能多地尝试不同的、更多的样式设定来实践各种CSS属性
- HTML 及 CSS 代码结构清晰、规范
在线学习参考资料
有趣的鼠标悬浮模糊效果总结
1、-webkit-text-fill-color
CSS中-webkit-text-fill-color属性指定文字前景填充颜色，如果没有设置这个属性，使用color属性。
2、background-clip Property
background-clip属性指定背景的绘画区域。
CSS语法：
background-clip: border-box|padding-box|content-box|text|initial|inherit;
border-box：默认值，背景剪裁到边框外延（但是在边框之下）。
padding-box：背景剪裁到内边距外沿。
content-box：背景剪裁到内容区外沿。
text: 背景剪裁到文字外边沿。
initial：设为属性默认值。
inherit：从父元素继承属性值。
3、CSS3 gradients
CSS3 gradient使两个或更多颜色间实现渐变。
CSS3定义了两种形式的渐变
linear gradients(goes down/up/left/right/diagonally)
radial gradients(center)
CSS3 linear gradients
为了产生一个线性渐变，必须至少定义两个颜色，同时也可以设置渐变的起始点和方向（或角度）。
语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：to bottom, to top, to right, to left, to bottom right等
to bottom：默认值，从上到下渐变。
to right:从左到右渐变。
to bottom right:从左上到右下对角线渐变。
使用angles
如果想对渐变方向增加控制，可以定义angle，使用angle后无需使用direction
语法：
background: linear-gradient(angle, color-stop1, color-stop2);
angle定义了水平线和垂直线之间的角度。
using transparency
CSS3渐变同样支持透明，这可以实现褪色效果。
为了添加透明，可以使用rgba()颜色，rgba()函数中的最后一个参数值取值范围为从0到1，0代表完全透明，1代表完全不透明。
repeating-linear-gradient()函数用于重复线性渐变
CSS3径向渐变
语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);
默认情况下，形状是椭圆形，大小为最远角，位置位于中心。
4、CSS3 opacity Property
不透明度属性设置一个元素的透明度水平。
不透明度水平描述透明度，1表示完全不透明，0.5表示50%透明，0表示完全透明。
注意：当使用不透明度属性为一个元素背景添加透明度时，所有的他的子元素也同样变得透明，如果不想让子元素透明，将背景使用RGBA颜色值。
CSS语法：
opacity: number|initial|inherit;
number：指定不透明度，取值从0.0（完全透明）到1.0（完全不透明）。
initial：设为默认属性。
inherit：继承父元素的属性。
5、已提交作业
代码地址https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-1
预览地址http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task4-1/index.html
