前端学习第19天

用户9574748758778
58 阅读1分钟

CSS3属性选择器

案例

image.png

image.png

CSS3结构伪类选择器

image.png

image.png

总结：nth-child(n) 选择父元素里面的第n个孩子，它不管里面的孩子是否是同一类型。

of-type选择指定类型的元素

image.png

结构伪类选择器小结

image.png

CSS3伪元素选择器

image.png

注意

image.png

CSS3 2D转换

转换（transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形。

.移动：translate

.旋转：rotate

.缩放：scale

二维坐标系

image.png

2D转换之移动translate

image.png

代码演示：

image.png

重点

image.png

image.png

让一个盒子水平垂直居中

通过定位配合translate来做

image.png

2D转换之旋转rotate

image.png

代码演示：

image.png

CSS三角

image.png image.png

2D旋转中心点 transform-origin

我们可以设置元素旋转的中心点

image.png

代码演示：

image.png

旋转中心点案例

image.png image.png

2D转换之缩放 scale

image.png

代码演示

image.png

scale的优势在于：不会影响其他盒子，而且可以设置缩放的中心点

图片放大案例

image.png image.png

分页按钮案例

image.png

代码演示：

image.png image.png

2D转换综合写法以及顺序问题

image.png 代码演示：

image.png

avatar
文章
阅读
粉丝