拔高、提升、创新！

Animation属性css3为Animation动画提供的几个属性如下：属性名 属性值animation-name 指定动画名称，该属性指定一个已有的关键帧定义。animation-duration 指定动画持续时间。animation-timing-funtion 指定动画变化速度。animation-delay 指定动画延迟多长时间才开始执行。animation-iteration-count 指定动画的循环执行次数。animation：这是一个复合属性。

transition过渡属性早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标经过、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。在CSS中创建简单的过渡效果可以从以下几个步骤来实现：在默认样式中声明元素的初始状态样式；声明过渡元素最终状态样式，比如悬浮状态；在默认样式中通过添加

transform变形css3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。比transitio

（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！

Flex 布局布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

position定位（核心）我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。三大属性：position属性，display属性，float属性。position 属性控制页面上元素间的位置关系。display 属性控制页面元素是否显示或者是堆叠还是并排显示。float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。position属性是干嘛用的？怎么用？有哪些属性值？position属性控制页面上元素间的位置关系，也就是排版。怎么用？要知道怎么用

盒模型盒模型：所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。position属性控制页面上元素间的位置关系。display属性控制元素是堆叠、并排或者不在页面上显示。float属性提供控制的方法，以便于把元素组成成多栏布局。盒模型讲解：在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。所以我们不能直接的看到页面中的盒

继承我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。当然还有一部分是不能继承的。例如边框、内外边距。层叠层叠是CSS的核心机制。层叠的工作机制：当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。层叠规则：层叠规则一：找到应用给每个元素和属性的声明。说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则，并标识出所有受到影响的HTML元素。

伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。伪类分为两种(以及新增的伪类选择器)：UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。:hover结构化伪类：会在标记中存在某种结构上的关系时例如：某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。:not和:target(CSS3新增的两个特殊的伪类选择器)

上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素 ID和类选择器：基于id#和class的属性值进行选择元素。 属性选择器：基于属性的有无和特征进行选择。 ①上下文选择器： 上下文选择器的语法格式：标签1 标签2{属性:值;} //注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开， 上下文选择器以空格隔开 ②特殊的上下文选择器 子选择器> : 语法格式:标签1>标签2 解释说明：标签1和标签2

效果查看：一、搭建好html页面结构先在html页面中创建出一个盒子用于存放按钮和文字光一个大盒子还不够，用span标签来说明文字，i标签来表示单选框中间的那坨圆点，这些都用一个小盒子套住，这个小盒子用于勾勒单选框的边框。如图。这样html页面结构就完成了二、规划样式将小盒子的边框勾勒出来，再将各个元素的样式都做出来后初始状态如下，对了，千万别忘了给小盒子一个过渡效果的样式，否则后续的操作会没有动态效果哦~！三、移入效果纯css怎么达到一个拟点击效果，我这里选择是hover伪类，虽然

成品动态展示：想要达到这种效果，实际上非常简单！只需要有一点html跟css的基础即可！1、 页面布局页面的布局通常用一个div嵌套住里面显示线条的元素线条的显示使用什么标签都行（推荐用li标签）；这样页面上的布局也就完成了接下来着重说明css部分2、css样式编写首先给这些标签一些基础样式其中比较重要的一个属性是text-align，我们需要将内容显示的线条元素居中在后续的操作中先写上，以免写到后面倒回来写这串代码上图作用：主要是将ul标签跟li标签自带的属性清除一下，再者就是将大

开发工具与关键技术：开发工具DW、vs code,关键技术html、css。实现的效果：鼠标移入按钮时按钮中的内容就会出现，分别展示不同的出现效果。效果难点：不使用JavaScript，那这个效果的难点就是在于:hover伪类的掌控，以及考验对html的结构掌握。1、 html布局在你想要的位置制作出5个导航栏按钮，或者更多。这就是html结构中的样子，下面来分析这种结构的意义；·整个导航栏就是一个菜单，表面上的就是一级菜单。·一级菜单里的内容就是二级菜单；·一级菜单复制了多个之后就是导