div:hover
{
animation:test 1s ease//ease是平滑效果
}
@keyframes tests
{
from
{
width:100px;
}
to
{
width:600px;
}
}
2.@keyframes的其他使用方法
@keyframes test
{
0%
{
}
50%
{
}
100%
{
}
}
3.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;//加在父级上,添加视角 视角离物体多远
8. .box
{
perspective:1000px;
}
.content
{
transform:rotateX(30deg);
}
9.
rotate7(30deg) translateX(100px);
10.父级加视角用于亲子代,子代的子代不行
11.子代加视角,父代中子代和子代拆分开来
12.transform-style:preserve-3d;//用于子代的子代的3D效果
13.prespective-origin:100px -800px;//正为Y轴下 负为Y轴上
14.
15. ctrl+/ 是注释快捷键
16.translateZ(-1px);//相当于Z-index
17.font-weight:bolder;
text-align:center;
18.
19.get(0)返回原生对象
20.KaTeX parse error: Expected 'EOF', got '#' at position 62: … 21.锚点链接-herf="#̲box1" 22.box3:t…(“li:contains(‘1’)”).css(“color”,“red”);//内容包含1则被选中
24.
(
"
b
u
t
t
o
n
"
)
.
o
n
(
"
c
l
i
c
k
"
,
f
u
n
c
t
i
o
n
(
)
c
o
n
s
o
l
e
.
l
o
g
.
.
.
.
.
.
.
.
.
)
)
25.
("button").on("click",function(){ console.log......... })) 25.
("button").on("click",function()console.log.........))25.(“input”).on(“keyup”,function(){
console.log…
}))
25.$(“input”).on(“keydown”,function(){
console.log…
}))
26.[type=text]{background:red;}//属性选择器
27.Obox.foucs()//获取焦点
28.