动画移动时间
animation: move 13s;
一直移动,无限循环
animation-iteration-count: infinite;
从A移动到B,移动过程中的变化
@keyframes move{
0%{top: 0;left: 0;width: 100px;}
20%{top: 0;left: 200px;width: 200px;} 40%{top: 200px;left: 200px;width: 300px;}
60%{top: 200px;left: 0;width: 400px;}
100%{top: 0;left: 0;width: 100px;}
}
transform: translate(50px,50px);
/固定到什么位置/
transform: rotate(60deg);
/倾斜的角度/
transform: scale(2,0.5);
/拉伸扭曲的倍数/
transform: skew(0deg,-30deg);
/向某个方向拉扯/
所有带有transform的元素显示会高于没有transform
甚至会高于我们定位的元素
定位的元素，默认的后面会覆盖前面的
就是后置元素覆盖前置元素
就跟现在的transform一样
但是定位有z-index改变层级的，只对定位生效
混合使用
transform: translate(50px,50px) rotate(60deg);
hover事件
鼠标事件,翻转的意思
transition:width 2s;
/*是为了兼容老版本的写法
比较新版本的浏览器都支持直接写
-moz代表firefox浏览器的私有属性
-webkit代表的是Chrome、safari浏览器的私有属性
-ms代表ie浏览器私有属性
-moz-animation: width 2s;
-webkit-animation: width 2s;
p:hover{width: 300px;}
