perspective: 设置父元素透视效果
只有父元素设置了透视效果,子元素的z轴的平移效果才能显示
平移时近大远小
transform-style:设置子元素的展示空间
取值:preserve-3d 伪3D
flat 2D设置
旋转时坐标系也随着元素旋转
transform:变形
属性值:
translate:平移,简写
只写一个值代表水平方向,垂直为0
包含:translateY/translateX
水平:正值向右,负值向左
垂直:正值向下,负值向上
rotate:设置旋转 单位deg
正值顺时针,负值逆时针
scale:设置缩小放大,数值,代表当前元素的宽高的倍数,
只写一值:代表宽高的缩放倍数相同
二个值:第一个代表宽,第二个代表高
注意:缩小是[0,1)
放大 >1
skew:设置倾斜,单位deg
包含:skewX/skewY
只写一个值:水平方向
transform-origin:设置旋转的定点
transition-property:设置改变的属性
值:
单个改变的属性
all:设置所有改变的属性
如果同时选择多个属性 用逗号隔开
transition-duration:设置过渡时间
transition-delay:设置过渡延迟
transition-timing-function:设置过渡速度
可选择:linear 匀速
ease 先慢后快再慢
ease-in 有慢到快
ease-out 由慢结束
ease-in-out 设置慢开始和结束
cubic-bezier 贝塞尔曲线
transition:简写 必须要包含变化的属性和过渡时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 124px;
height: 180px;
background-color: pink;
background-image: url(./练习/行走的小雪人/src=http___www.topzhong.com_d_file_sitenews_2016-09-08_f1b1982dd8999c6428c67b990df404ac.jpg&refer=http___www.topzhong.jpeg);
/* 设置引入关键帧的名字---动画名字 */
animation-name: run;
/* 设置动画完成的时间 */
animation-duration: 4s;
/* 设置动画速度 */
animation-timing-function: linear;
/* 设置动画播放次数 */
animation-iteration-count: infinite;
/* 设置动画播放的方向:正反交替 */
animation-direction: alternate-reverse;
/* 设置动画是否停止 */
/* animation-play-state: paused; */
/* 简写 */
/* animation: run 2s steps(3) 1s 2; */
/* 设置动画停止时的状态 */
animation-fill-mode: forwards;
}
div:hover {
animation-play-state: paused;
}
/* 设置关键帧 */
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -372px 0;
}
}
</style>
</head>
<body>
<!--
1.设置关键帧
2.通过animation引用关键帧
animation-name:关键帧名字 必填
animation-duration:设置动画使用时间 必填
animation-timing-function:设置动画运行的速度
取值:
linear 匀速
ease 慢-快-慢
ease-in
ease-out
ease-in-out
贝塞尔曲线
steps(num) 代表动画完成时通过几步
animation-iteration-count:设置动画播放次数
取值: infinite 循环
num
animation-direction:设置播放方向
取值:
alternate 正-反-正
alternate-reverse 反-正-反
animation-play-state:设置动画是否停止
取值:
running 播放
paused 停止
animation-fill-mode:设置动画停止是的状态
取值 :backwards:
forwards
-->
<!-- 设置关键帧 -->
<div></div>
</body>
</html>