前端学习笔记--CSS3新增属性

前端学习笔记--CSS3新增属性

在css3中，text-shadow可设置文本阴影。通过属性值能够规定水平阴影、垂直阴影、模糊距离，以及阴影颜色：

语法

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是0.

多层阴影

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。

注意：多阴影中，先写的阴影压盖在后写的阴影上。

css3 盒子阴影

box-shadow 属性用于对盒子边框添加阴影。

语法

box-shadow 属性向盒子添加阴影，属性值有2-4个长度值、可选的颜色值以及可选的inset关键词来规定，省略的长度是0.

注意：外部的边框阴影不需要进行设置，他是默认的，如果增加了outset值反而出现错误。

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

css3 过渡属性

过渡属性

属性名：transition

语法格式

transition: 过渡的属性 过渡时间 运动曲线 延时时间；

单一属性

transition-property 过渡属性

none表示没有属性过渡

all 表示所有变化的属性都过渡

属性名 使用具体的属性名，多个属性名中间逗号分隔

transition-timing-function 时间曲线

浏览器兼容

IE10 、Firefox 、Chrome 以及 Opear 支持 transition属性

Safari 需要前缀 -webkit

注意：IE9 以及更早的版本，不支持transition属性

2D转换

属性名：transform

作用：对元素进行移动、缩放、转动、拉长或拉伸。

位移 translate()

transform 的属性值为 translate()时，可以实现唯一效果。

缩放 scale()

transform 的属性值为scale()时，可以实现元素缩放效果。

旋转 rotate()

transform 的属性值为 rotate()时,实现元素的旋转。

旋转 rotate (数字deg)

其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有一个属性值。

倾斜 skew()

transform 的属性值为 skew()时,实现元素的倾斜。

3D转换

3D坐标轴

透视

透视可以将2D的平面，在转换过程中，呈现3D效果。

特点：近大远小

透视属性 perspective

属性名：perspective

作用：设置在z轴的视线焦点的观察位置，从而实现3D查看效果

属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸。

注意：透视属性需要设置给3D变化元素的父级

3D旋转

3D 位移

transform-style 属性

用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D 转换坐标轴。

浏览器兼容

IE10、Firefox 以及 Opera 支持 transform属性

Chrome 和 Safari 需要前缀 -webkit-

IE9 需要前缀 -ms -

css3 动画

css3 动画制作分成两步：创建动画、绑定动画

创建动画

@keyframes规则用于创建动画

在@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间，或用关键词“from”和“to”,等同于0%和100%。 0%是动画的开始，100%是动画的完成。

@keyframes书写语法

@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节

}

绑定动画

animation 属性用于对动画进行捆绑

语法：

div {

animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间；

}

其中必须设置动画名称和过渡时间，其他属性可以根据需求设置。2024-08-15