周瑞兵_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.做翻转效果的时候,学习到了一种立体的思维。
近期评论