1.2D转换tranform
1.1移动translate
- 不影响其他元素的位置。
- 对行内元素无效。
- 括号里面可以是以px为单位,也可以是百分数。
tranform:translate(x,y)
tranform:translateX(n)
tranform:translateY(n)
//tranform:translateY(50%)表示沿y轴向下移动盒子高度的50%
1.2旋转rotate
- 正数表示顺时针,反之。
transform:rotate(5deg);
1.3设置转换中心点
- 默认转换中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者方位名词(top right bottom left)
transform-origin:x y;
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转案例</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid pink;
overflow: hidden;
}
div::after {
transition: all .4s;
display: block;
width: 100%;
height: 100%;
background-color: aquamarine;
content: "黑马";
transform: rotate(180deg);
transform-origin: left bottom;
}
div:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1.4缩放scale
- 优势:不会影响其他盒子;可以设置缩放的中心点,默认以中心点缩放。
transform:scale(x,y);
//x y不带单位,指的是倍数
transform:scale(x);
//意思是y和x一样,等比例缩放
1.5综合写法
- 格式为transform:translate() rotate() scale() ...等(中间用空格隔开)
- 其顺序会影转换的效果。(先旋转会改变坐标方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
2.动画
2.1属性总结
属性 | 描述 |
---|---|
@keyframes | 规定动画模式。 |
animation | 设置所有动画属性的简写属性。 |
animation-delay | 规定动画开始的延迟。 |
animation-direction | 规定动画是向前播放、向后播放还是交替播放。 |
animation-duration | 规定动画完成一个周期应花费的时间。 |
animation-fill-mode | 规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。 |
animation-iteration-count | 规定动画应播放的次数。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-play-state | 规定动画是运行还是暂停。 |
animation-timing-function | 规定动画的速度曲线。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画</title>
<style>
@keyframes move {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(1000px);
}
100% {
transform: translateX(500px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* name必需 */
animation-name: move;
/* 持续时间必需 */
animation-duration: 2s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.2animation-duration
- 如果未指定该属性,则动画不会发生,因为默认值是 0s(0秒)。
- 可以使用关键字 "from" 和 "to"(代表 0%(开始)和 100%(完成))。
2.3animation-delay延迟动画
- 负值也是允许的。如果使用负值,则动画将开始播放,如同已播放 N 秒。
- 默认是0
2.4animation-iteration-count
- 默认是1
animation-iteration-count: infinite;
//动画永久持续
animation-iteration-count: 3;
//动画持续3次
2.5animation-direction指定是向前播放、向后播放还是交替播放动画
该属性可接受以下值:
- normal—— 动画正常播放(向前)。默认值
- reverse——动画以反方向播放(向后)
- alternate——动画先向前播放,然后向后
- alternate-reverse——动画先向后播放,然后向前
2.6animation-timing-function规定动画的速度曲线
该属性可接受以下值:
- ease——指定从慢速开始,然后加快,然后缓慢结束的动画(默认)
- linear——规定从开始到结束的速度相同的动画
- ease-in——规定慢速开始的动画
- ease-out——规定慢速结束的动画
- ease-in-out——指定开始和结束较慢的动画
- cubic-bezier(n,n,n,n)——运行您在三次贝塞尔函数中定义自己的值
- step(n)——表示将总过程分为n步进行
2.7animation-fill-mode规定动画的填充模式
该属性可接受以下值:
- none——默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards——元素将保留由最后一个关键帧设置的样式值(依赖 animation-direction 和 animation-iteration-count)。
- backwards——元素将获取由第一个关键帧设置的样式值(取决于 animation-direction),并在动画延迟期间保留该值。
- both——动画会同时遵循向前和向后的规则,从而在两个方向上扩展动画属性。
2.8animation-play-state规定动画是运行还是暂停
- 默认是running,还有paused。
2.9animation简写
不包括animation-play-state属性,要写的话应该专门另外写。
animation: 动画名称(必) 持续时间(必) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;