１: transition
div {
200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
/*transition: all 0.6s; 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
/*默认的是ease 先快在慢*/
transition: width 1s,height 2s;
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
600px;
height: 600px;
}
２：transform：translate()
div {
100px;
height: 100px;
background-color: pink;
/*transform: translateX(x, y)*/
/*变形： 移动*/
transition: all 0.5s;
}
div:hover {
transform: translateX(100px);
/*a:active 鼠标没点击没有松开鼠标的时候触发的状态 相当于点击*/
/*transform: translate(50px, 50px); 当我们点击之后再移动位置*/
/*transform: translate(50px); 当我们点击之后再移动位置 x轴*/
/*transform: translate(0, 50px); 当我们点击之后再移动位置 y轴*/
/*只跟一个参数就是 X*/
/*transform: translateY(100px); 只跟一个参数就是 Y*/
}
例子：让盒子居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
3: transform: scale(ｎ)；
div img {
transition: all 0.2s; 因为图片缩放了， /*实际图片做动画 所以过渡要给img 做动画 谁做动画，谁加过渡*/
}
div:hover img{
transform: scale(1.2); /*鼠标经过盒子的时候 里面的img做 缩放*/
}
4: transform: rotate(360deg); transform-origin: transform-origin: top right; /2D旋转/
img {
margin: 200px;
transition: all 0.6s;
transform-origin: top right;/*旋转的中心点，默认是中心位置，设置之后可以改变旋转的中心点*/
}
img:hover {
transform: rotate(360deg); /* deg 度数*/
}
透视效果:perspective: 10000px
body {
perspective: 10000px; 视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显
}
img {
display: block;
margin: 100px auto;
transition: all .2s;
}
img:hover {
transform: rotateX(360deg);
}
5: transform: skew(-30deg, 30deg); /倾斜/
６：动画：
div {
100px;
height: 100px;
background-color: pink;
animation: go 2s ease 0s infinite alternate; /*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
/*动画名称是自己定义的 go google*/
/*infinite 无限循环*/
/*一般情况下，我们就用前2个 animation: go 2s*/
}
/*@keyframes go {} 定义动画*/
@keyframes go {
from {
transform: translateX(0)
}
to {
transform: translateX(600px)
}
}
或者：
div {
100px;
height: 100px;
background-color: pink;
/*animation: go 2s ease 0s infinite alternate; 引用动画*/
animation: go 2s infinite; /*引用动画*/
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
/*动画名称是自己定义的 go google*/
/*infinite 无限循环*/
/*一般情况下，我们就用前2个 animation: go 2s*/
}
/*@keyframes go {} 定义动画*/
@keyframes go {
0% { /*起始位置，等价于 form*/
transform: translate3d(0, 0, 0) ;
}
50% {
transform: translate3d(800px, 400px, 0);
}
51% {
transform: translate3d(0, 400px, 0);
transform: rotateY(180deg);
}
99% {
transform: translate3d(0, 0, 0); /*100% 相当于结束位置 to*/
transform: rotateY(180deg);
}
}/* 动画结束之后会返回原来的位置！！！*/
animation-play-state:paused; /*鼠标经过暂停动画*/