CSS3学习笔记

transform

transform:属性旋转，缩放，倾斜或平移给定元素

属性	介绍
translate()	平移
scale()	缩放
rotate()	旋转
skew()	倾斜

注意：scale()缩放

1. 值为负值时，是倒向，
2. 值为0时，让元素消失（被隐藏了），但是没有被删除
3. 值为0~1时，缩放
4. 值大于1时，放大

rotate()旋转

//注意单位deg
transform:rotate(10deg);

变化基点

变化基点：transform-origin
值：关键字top、left、right、bottom、center或百分比或数字。

transform兼容性问题

前面加-webkit(谷歌、Edge识别)或-moz(火狐识别)

-webkit-transform:skew(10deg,20deg);
-moz-transform:skew(10deg,20deg);

transition

transition实现过度动画效果，把变化的中间部分呈现出来

属性	说明
transition-property	设置过渡动画生效的对应CSS样式
transition-duration	设置持续的时间
transition-delay	延时的时间
transition-timing-function	速度曲线

速度曲线除了提供的固定选择外，可以自己在以下网站中自行设置：
https://cubic-bezier.com/#.17,.67,.83,.67

添加和移除class属性样式

transition的事件

事件	说明
transitionstart	过渡动画真实开始
transitionorun	触发生效
transitionend	真实结束

animation关键帧

两种写法

//1. 第一种写法
from{
	//最初显示的样式
}
to{
	//最终变化到的样式
}

//2.第二种写法
0%{
	//最初帧显示的样式
}
50%{
	//最终变化到的帧显示的样式
}
100%{
	//最初帧显示的样式
}

animation的一些属性

1. 指定要调用的属性名
   animation-name:xxx;
2. 动画持续时间
   animation-duration: 2s;
3. 动画速度曲线
   animation-timing-function:xxx;
4. 循环的次数
   无限循环：
   animation-iteration-count:infinite;
   循环3次：
   animation-iteration-count:3;
5. 控制最终显示的帧的位置
   animation-fill-mode:xxx;

值	说明
both	最后一帧+初始帧
forwards	最后一帧
backwards	保留第一帧

6. 播放和停止动画
   animation-play-state: xxx;
   值：
   running（播放）
   paused（暂停）

7.控制动画执行方向
animation-direction:alternate;交替反复，有点像循环，不过这个需要与animation–iteration-count:3;一起使用

3D变化

需要一个父容器设置3D空间

然后，子元素可以设置基点旋转等操作。

响应式布局（媒体查询）

@media screen and (条件){
element{样式}
}

例子

//屏幕在宽度500px与800px之间，盒子背景变为红色
@media screen and (max-width: 800px) and (min-width: 500px){
	.box {
		background-color: red;
	}
}