CSS ANIMATION

div:hover
{
animation:test 1s ease//ease是平滑效果
}
@keyframes tests
{
from
{
width:100px;
}
to
{
width:600px;
}
}

[email protected]的其他使用方法

@keyframes test
{
0%
{

}
50%
{

}
100%
{

}
}

div:hover
{
animation:test 1s ease 1s 12;
}

4.animation:test 1s ease alternate-reverse 2;//alternate-reverse为反向动画；infinite为无限循环
5.https://daneden.github.io/animate.css/ //CSS动画库
6.引用方法
7.3D效果

transform:rotateY(30deg);
perspective:1000px;//加在父级上，添加视角 视角离物体多远

.box.box
{
perspective:1000px;
}
.content
{
transform:rotateX(30deg);
}

rotate7(30deg) translateX(100px);

10.父级加视角用于亲子代，子代的子代不行
11.子代加视角，父代中子代和子代拆分开来
12.transform-style:preserve-3d;//用于子代的子代的3D效果
13.prespective-origin:100px -800px;//正为Y轴下 负为Y轴上
14.

10. ctrl+/ 是注释快捷键
16.translateZ(-1px);//相当于Z-index
17.

font-weight:bolder;
    text-align:center;

18.

19.get(0)返回原生对象
20.$("li:eq(2)").css("color","red");//选择第二个将颜色变为红色

21.锚点链接-herf="#box1"
22.box3:target//选中状态的div
23.$("li:contains('1')").css("color","red");//内容包含1则被选中
24.

$("button").on("click",function(){
console.log......... 
}))

$("input").on("keyup",function(){
console.log......... 
}))

$("input").on("keydown",function(){
console.log......... 
}))

26.[type=text]{background:red;}//属性选择器
27.Obox.foucs()//获取焦点
28.