H5
header
article
nav
....
选择器:
querySelectorAll('')
querySelector('')
属性:
data-
obj.dataset 集合
class:
classList
.add
.remove
.contains
.toggle
className 先清除所有class再加
选择器:
li:nth-child()
伪类:
:hover
:active
:link
:visited
:togget
:target(**)
transition:1s all ease 1s
transform:rotate(20deg)
@-webkit-keyframes mymove {
from {top:0px;}
to {top:200px;}
0%{}
20%{}
50%{}
100%{}
}
animation:1s mymove ease
css3
颜色模式:
a)red,blue
b)#399
c)rgb(255,255,0)
d)rgba(255,0,0,1) 不兼容
应用场景:背景透明、文字不透明
以前:定位、多个层
现在:rgba
--优酷
阴影:
所有阴影可以叠加
文字阴影：
text-shadow:1px 1px 1px red
x y 模糊度 颜色
----叠加效果！
text-shadow:100px 2px 4px red,110px 4px 8px blue,120px 8px 16px green;
文本描边：
-webkit-text-stroke:2px #fff;
文字模糊：
color:rgba(0,0,0,0);
text-shadow:0 0 100px #fff;
块阴影--内
text-shadow:1px 1px 1px 1px red
x y 模糊度 大小 颜色
box-shadow:(inset) 1px 1px 1px 1px red
内 x y 模糊度 大小 颜色
box-shadow:5px 0 2px red,0 2px 2px green;
transform:变形
transform：rotate（45deg）--旋转45deg；
transform:translate(100px,200px)---平移！
translate(x,y)
x正数向右
y正数向下
transform:scale(1,2)-------缩放（比例）
scale(2)
x轴
y轴
transform:skew(0deg,45deg)-----倾斜（度）
好处：
物体本身没有发生变化，盒子模型没有改变，不会不会引起浏览器重绘，
---性能高！只是视觉上的变化！
注意:span a 这些行内元素识别这些样式！
必须的转换：块，行内快！
简写：transform:多个值
3D：
变形
transform:rotate
transform:rotateX(180deg)-----高度变矮
transform:rotateY(180deg)-----宽度变窄
transform:rotateZ(180deg)-----旋转
官方网站的登录
css3时钟:
以....为中心点！！
transform-origin:50px 50px;
找旋转的中心点（默认是正中心）
transform-origin:x y；
x与y的交叉处就是中心点！！！
透视（景深）：指的是观察物体的远近的程度！
persepective（距离）
加给变化的物体
transform:perspective(800px) rotateX(45deg);
一般来说距离取多少合适？
800px
1200px
官网的作品展示：
最少5张！
[l2,l1,cur,r1,r2,,]
[l1,cur,r1,r2,,,l2]
[cur,r1,r2,,,l2,l1]
有点瑕疵：
1.点块了出事
2.突然变大
perspective用法：
1.加给变化物体
transform:perspective(1200px) translateX(200px) rotateY(-60deg);
2.加给父级
perspective:800px;
真正的3D！
transform-style:preserve-3d;---专门给Z轴加空间！
把2维空间变成三维空间！
****想让一个子级在Z轴起来，必须把它的最近的父级变成三维空间！
backface-visibility:hidden;---背面的可见度！
立方体：
6个面！
