CSS3其他特性

图标变模糊 – CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

语法：filter: 函数(); --> 例如： filter: blur(5px); --> blur模糊处理 数值越大越模糊

计算盒子宽度 – calc 函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算

语法：

width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

CSS3 过渡（★★★）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画： 是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。

我们现在经常和 :hover 一起 搭配使用。

语法：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

• 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以
• 花费时间： 单位是 秒（必须写单位） 比如 0.5s
• 运动曲线： 默认是 ease （可以省略）
• 何时开始：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
• 后面两个属性可以省略
• 记住过渡的使用口诀： 谁做过渡给谁加