css3!!

1:nth-of-type():选择器,这个类型【我来介绍下和nth-children的区别:nth-of-type()是用来选中同一类型的,就是同级中有其他的元素类型,但是不影响你选择同级的类型,nth-children,这个也是选择器,但是如果中间添加了同级不相等的元素,最后选择的结果就会受到影响】

2:selection:字体选中,改变其选中后的状态颜色之类,但是只能有三个属性:(颜色/color,背景颜色/bg-color,文本阴影/test-shadow)

3:target:目标选择器,【点击某个元素或者标签内容,都会显示相对应的目标选择器】

4:not():除此之外【例如我设置一个li,然后设置的除了选择的那个意外,都有样式】

5:empty:这个元素什么都没有,空的

6:enabled:能用的,【想设置某个选择器的是否可用,可以直接在该标签后面加个empty】

7:disabled:不能用的,同理上!

8:read—only:只能读【如果你想将什么内容设置为只能读,不能点击或者其他的操作,那就直接可以在该标签里面加它】

9:read—write:能读能写,正常执行

10:box—shadow:该参数可以有很多个,但也可以有不设置的【参数:水平阴影的位置,垂直阴影的位置,模糊位置,阴影大小颜色】

11:border—image:可以用背景图片渲染,也可以用图片渲染背景

12:background—image:linear-gradient()/radial-gradient()前者线型渐变,后者径向渐变

13:反切,将图印在文字里面:-webkit-background-clip:text;test-fill-color:transprent

14:backgrounnd-attachment:相对于容器定位【默认值】,local:相对于内容区定位,就是一个容器里有文字之类,fixed:相对于可视区定位,就是整个屏幕

15:background-size:cover【背景不可能出现两张图,一张图完整的填充】/contain【repeat】

16:background-image:linear-gradient(to top right,R,G,B):渐变【也可以一直添加】/radial-gradient径向渐变

17:white-space:pre-加空格或者换行

18:word-break:break-word(尽可能保留英文单词完整) /break-all(超出部分不换行/break-all(到边界就换行))

box:
1:order:x(数字):定义排列序表,数字小的二拍子在前面

2:flex-grow:x(数字比列):在行,主轴内将剩余空间分配刮分按比例

3:flex-shrink:x(数字,比列):按比例伸缩【压缩像素】,还有个公式哦!

4:flex-basis比width优先级高,可以说就是覆盖或取代width

animation:
1:@keyframes:xx{…}:帧动画

2:animation-play-state:running运动/paused暂停【就是设置一个东西运动或者设置他的样式,然后可以添加这个方法,前者是正常运动,后者是暂停,就像你把鼠标移动到物体上,然后物体如果在运动,那么就会停止】

3:animation-fill-mode:none【默认值】/还有一个就是设置状态为结束时的状态forwords,还有一个就是相反的,开始状态backwards。

4:animation:xx xS steps(参数:步数,star保留下一个状态)/end(结尾状态,当前状态到这段动画的时间结束)

transform:
1:transform-origin:(旋转轴,就是定点,旋转就是围绕定点旋转)

2:transform:rotate3D():【参数:数字】数字表示3D空间 比列

3:infinte:一直,循环运动

4:alternate:返回运动(往返)

5:scale:扩大,缩小比列

6:skew:沿坐标轴倾斜

perspective:(景深)
景深就是离你视觉的距离,就像是在一个3D空间里面,你设置的景深离你的距离,越远,看着就越小,越近,看着就越大,就像一个箱子,你设置的景深数字很大,那么你视觉看到的箱子会很小,好像离你很远,如果涉资的数字越小,你看到的箱子可能会大一些,感觉离你很进,就像是Z轴移动的感觉一样,其实就是一种渲染,将这个元素定位给在三维空间,子元素、副元素都加这个不会错(preserve-3D),如果感兴趣你也可以查查关于js设置3d效果,很有趣哦!

矩阵:
在你想将一个东西设置他的大小,或者距离,还有伸缩,其实都是关于矩阵的一种算法,交叉法!,不过提醒一下,矩阵是反着算的,先根据结果推出前面值

列如:|a,b,c|*x=|ax+bx+cx|【就是几行乘以几列】

好啦,css3大致重点都写完了,如果感兴趣可以看看gpu!!里面也有很多只是知识点的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值