一、知识点总结

1、transform

transform 是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放， 移动，倾斜等。

transform: none|transform-functions;

1.1、transition

transition 属性设置元素当过渡效果，四个简写属性为

• transition-property 指定CSS属性的name，transition效果

• transition-duration transition效果需要指定多少秒或毫秒才能完成

• transition-timing-function 指定transition效果的转速曲线

• transition-delay 定义transition效果开始的时候

  transition: property duration timing-function delay;
  

1.2、动画

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色 定义语法：

@keyframes animationName{
    from {}
    to {}
}

3.1 使用

animation: name duration timing-function delay iteration-count direction
fill-mode play-state;

List-style

• list-style:none; 没有点的呈现
• list-style: disc; 呈现圆点
• list-style: circle; 空心圆
• list-style: square;正方块

1.3、透明度

opacity·: 0.8; /属性值 [0-1] 0：完全透明 1：不透明/

1.4、光标

cursor: pointer;

• repeat 水平和垂直方向都重复
• default 默认光标
• help 指示可用的帮助（通常是一个问号或一个气球）
• wait 指程序正忙（通常是一个表或沙漏）

2、布局（排版）

之前呢，我们已经学习了CSS的基础知识，如何设置文本的样式，背景等。现在我们来看看如何把你的 内容放在与你想要的正确位置上。 CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者 主视口/窗口的位置。在这将涉及更多关于页面布局技术的细节 ：

• 正常布局流

• display 属性

• 弹性盒子

• 网格 浮动

• 定位

• CSS

• 表格布局

• 多列布局

3、浮动

CSS 的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

3.1、清除浮动

clear可以取三个值：

• left ：停止任何活动的左浮动
• right ：停止任何活动的右浮动
• both ：停止任何活动的左右浮动

9、总结

• 脱离文档流，不占原来的文档流位置
• 浮动元素在父元素中所占的面积的有效高度为0
• 非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

二、心得体会

1.今天学习了用CSS制作动画效果，对于CSS又多了一种新的认识，以前以为动画效果都是通过JavaScript做的，原来考CSS也是可以做到的。

2.做翻转效果的时候，学习到了一种立体的思维。