Wednesday,January,13th

知识点总结

transform

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

属性值转换：

3d转换：

transition

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

• transition-property 指定CSS属性的name，transition效果
• transition-duration transition效果需要指定多少秒或毫秒才能完成
• transition-timing-function 指定transition效果的转速曲线
• transition-delay 定义transition效果开始的时候

语法:

transition: property duration timing-function delay;

transition-timing-function 常用的值有：

动画

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

@keyframes animationName{
from {}
to {}
}

使用：

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

布局

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

正常布局流(Normal flow)

浮动

多列浮动

清除浮动

我们很快就会碰到一个问题——所有在浮动下面的自身不浮动的内容都将围绕浮动元素进行包装，如果
没有处理这些元素，就会变得很糟糕。
我们在上例中第二个 div 元素下面添加如下代码：

<footer>
<p>&copy;2020 your imagination. This isn't really copyright, this is a
mockery of the very concept. Use as you wish.</p>
</footer>

你会看到页脚在最长的列旁边环绕着，这看起来很糟糕——我们希望页脚保持在底部，在所有的列下
面。有一种简单的方法可以解决这个问题—— clear 属性。
clear 属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后
面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。

footer {
clear: both;
}

clear 可以取三个值：

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

心得体会

今天跟着老师一起边学习，边实践，用transform的属性做了盒子div的三维翻转、菜单列表的三维反转、用动画中的知识做了小相册。在之前的学习过程中，这些知识点是接触过，但仅仅只是接触过而已，今天跟老师学习，做出了这些知识点的使用效果，感觉很开心！

希望老师在授课的过程中，对于我们之前没有接触到的知识点，讲地慢一些，这样有助于对知识点理解的比较透彻。