• 欢迎光临~

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

开发技术 开发技术 2022-08-04 次浏览

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 CSS3 新增选择器

CSS3 给我们新增了选择器,可以更加便捷,更加自由的选择目标元素

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

注意:类选择器、属性选择器、伪类选择器,权重为 10

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素, 常用于根据父级选择器里面的子元素

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 总结:

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 注意:

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

CSS3 盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为 content-box、border-box,计算盒子大小的方式就发生了改变。

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

如果盒子模型我们改为了box-sizing: border-box , 那padding和border就不会撑大盒子了(前提padding

和border不会超过width宽度)

CSS3 其他特性

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

CSS3 calc 函数:

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

CSS3 过渡

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或

JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画:是从一个状态 渐渐的过渡到另外一个状态

可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1.属性: 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡,写一个all 就可以。

2. 花费时间: 单位是 秒(必须写单位) 比如 0.5s 

3. 运动曲线: 默认是 ease (可以省略)

4.何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

平面转换概念

目标:使用transform属性实现元素的位移、旋转、缩放等效果

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 使用translate实现元素位移效果

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

位移-绝对定位居中

目标:使用translate快速实现绝对定位的元素居中效果

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

原理:  位移取值为百分比数值,参照盒子自身尺寸计算移动距离

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

语法

transform: translate(水平移动距离, 垂直移动距离)

旋转

目标:使用rotate实现元素旋转效果

语法

transform: rotate(角度);注意:角度单位是deg

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

转换原点

目标:使用transform-origin属性改变转换原点

语法

默认圆点是盒子中心点

transform-origin: 原点水平位置 原点垂直位置

取值

方位名词(left、top、right、bottom、center) Ø 像素单位数值

百分比(参照盒子自身尺寸计算)

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

转换原点

目标:使用transform-origin属性改变转换原点

语法

默认圆点是盒子中心点

transform-origin: 原点水平位置 原点垂直位置

取值

方位名词(left、top、right、bottom、center) Ø 像素单位数值

百分比(参照盒子自身尺寸计算)

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

多重转换

目标:使用transform复合属性实现多形态转换

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

多重转换

目标:使用transform复合属性实现多形态转换

多重转换原理

旋转会改变网页元素的坐标轴向

先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

缩放

目标:使用scale改变元素的尺寸

语法

transform: scale(x轴缩放倍数, y轴缩放倍数)

技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

渐变背景

目标:使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

空间转换

目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间:是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。

空间转换也叫3D转换

属性:transform

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换 

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换 

透视

目标:使用perspective属性实现透视效果

思考:生活中,同一个物体,观察距离不同,视觉上有什么区别?

答:近大远小、近清楚远模糊

思考:默认情况下,为什么无法观察到Z轴位移效果?

答:Z轴是视线方向,移动效果应该是距离的远或近, 电脑屏幕是平面,默认无法观察远近效果

属性(添加给父级)

perspective: 值;

取值:像素单位数值, 数值一般在800 – 1200。

作用:空间转换时,为元素添加近大远小、近实远虚的视觉效果

透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

空间旋转

目标:使用rotate实现元素空间旋转效果

语法

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值)

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换

 

 

程序员灯塔
转载请注明原文链接:CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
喜欢 (0)