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个面!
网友评论