CSS3 基础及动画相关实践

一、分享目的

• 普及CSS基础知识
• 介绍CSS3基础及动画相关熟悉
• 通过分析iceland首页动画源码，介绍使用CSS3动画属性
• 最终目的：让大家了解，什么样的动画和动效，前端能使用CSS3写出来。

二、什么是CSS

以下是官方解释：

• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一

问题：
层叠 如何理解？
关键词：权重 继承
CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。

通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式

//btn在被鼠标hover的时候，背景会变为白色
.btn{
background:red; 
}
.btn:hover{
background:white;
}

css语法

selector  {  //选择器
    property1:value1;//属性:值 --> 声明
    property2:va