周瑞兵_20210113 周瑞兵

一、知识点总结

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.做翻转效果的时候,学习到了一种立体的思维。

标签

评论

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