郭青青_2021.01.13-郭青青

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的三维翻转、菜单列表的三维反转、用动画中的知识做了小相册。在之前的学习过程中,这些知识点是接触过,但仅仅只是接触过而已,今天跟老师学习,做出了这些知识点的使用效果,感觉很开心!

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

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1