CSS3 常用特性
一、CSS3 简介
什么是 CSS3
- 在 CSS2 的基础上拓展、新增的样式
CSS3 发展现状
-
浏览器支持程度差,需要添加私有前缀
-
移动端支持优于 PC 端
-
CSS3 不断改进中
-
CSS3 相对 H5,应用非常广泛
二、属性选择器
-
示例
button[disabled] { cursor: default } input[type=search] { color: skyblue; } span[class^=black] { color: lightgreen; } span[class$=black] { color: lightsalmon; } span[class*=black] { color: lightseagreen; }
-
注意:类选择器、属性选择器、伪类选择器,权重为 0 0 1 0。
三、结构伪类选择器
-
nth-child 详解
-
注意:本质上就是选中第几个子元素
-
n 可以是数字、关键字、公式
-
n 如果是数字,就是选择第 n 个子元素, 数字从1开始
-
n 可以是关键字:even 偶数,odd 奇数
-
n 如果是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略
-
示例
/* 偶数 */ ul li:nth-child(even) { background-color: red; } /*n 是公式,从 0 开始计算 */ ul li:nth-child(n) { background-color: lightcoral; } /* 奇数 */ ul li:nth-child(2n + 1) { background-color: lightsalmon; }
-
-
注意:
-
结构伪类选择器一般用于选择父级里面的第几个孩子
-
nth-child 对父元素里面所有孩子排序选择(序号是固定的)。先找到第n个孩子,然后看看是否和 E 匹配
-
nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配所有 E ,然后找到第 n 个 E
-
关于 nth-child(n), 使用公式时 n 是从 0 开始计算的
-
类选择器、属性选择器、伪类选择器,权重为 0 0 1 0
-
四、伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。
-
语法
element::before { content: ''; } element::after { content: ''; }
-
注意
-
before 和 after 必须有content属性
-
是在指定的 element 元素中创建一个子元素
-
before 在内容前面,after 在内容后面
-
before 和 after 创建的是一个元素,但是属于行内元素
-
创建出来的元素在 Dom 中查找不到,所以称为伪元素
-
伪元素和标签选择器一样,权重为 0 0 0 1
-
-
示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 50px; background-color: hotpink; line-height: 50px; } div::before { content: '前面'; color: blue; } div::after { content: '后面'; color: blue; } </style> </head> <body> <div>div中的内容</div> </body> </html>
-
效果
-
伪元素清除浮动解析
-
额外标签法也称为隔墙法,要求这个新的空标签必须是块级元素
-
两种利用伪元素清除浮动的方法算是额外标签法的一个升级和优化
-
第一种
.clearfix:after { content: ""; /* 伪元素必须写的属性 */ display: block; /* 插入的元素必须是块级元素 */ height: 0; /* 不需要看见这个元素 */ clear: both; /* 清除左右浮动 */ visibility:hidden; /* 不需要看见这个元素 */ } .clearfix { *zoom: 1; /* IE6、7专有 */ }
-
第二种
.clearfix:before, .clearfix::after { content: ""; /* 伪元素必须写的属性 */ display: table; /* 转换为块级元素并且一行显示 */ } .clearfix:after { clear: both; /* 清除左右浮动 */ } clearfix { *zoom: 1; /* IE6、7专有 */ }
-
五、CSS3 盒子模型
CSS3 中可以通过 box-sizing
来指定盒模型
属性值:
-
content-box:盒子大小为 width + padding + border,还是以前的计算方式
-
border-box:盒子大小为 width,padding 和 border 不会撑大盒子(前提padding
和border不超过width宽度)
六、CSS3 滤镜 filter
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
-
语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
-
示例
img { /* 图片使用高斯模糊效果,数值越大越模糊 */ -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); }
-
效果
-
注意
-
滤镜通常使用百分比 (如:75%),当然也可以使用小数来表示 (如:0.75)
-
使用空格分隔多个滤镜
-
七、CSS3 calc 函数
calc() 函数用于动态计算长度值。
-
语法
calc: (expression);
-
示例
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fa { height: 200px; width: 100%; background-color: hotpink; } .son { height: 50px; width: calc(100% - 100px); background-color: khaki; } </style> </head> <body> <div class="fa"> <div class="son"></div> </div> </body>
-
注意
-
运算符前后都需要保留一个空格
-
任何长度值都可以使用calc()函数进行计算
-
calc()函数支持 + 、- 、* 、/ 运算
-
calc()函数使用标准的数学运算优先级规则
-
100% 表示的是父元素宽度的100%
-
八、CSS3 过渡动画
过渡(transition) 是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或
JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加动态效果。
过渡动画: 是从一个状态渐渐的过渡到另外一个状态。
-
语法
/* 简写 */ transition: property duration timing-function delay; transition: 要过渡的属性 花费时间 运动曲线 何时开始; /* 分开 */ transition-property: none|all| property;; transition-duration: time; transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); transition-delay: 0.5s;
-
属性值
-
property
想要变化的 css 属性, 宽度、高度、背景颜色、内外边距都可以,多个属性用逗号隔开。如果想要所有的属性都变化过渡, 写一个all 就可以。
默认值是 all。
也可以写 none,表示没有属性会获得过渡效果。
-
duration
规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。
-
timing-function
指定切换效果的速度,默认是 ease。
-
delay
指定何时将开始切换效果(以秒或毫秒计),默认 0。
-
-
注意
-
始终指定 transition-duration 属性,否则持续时间为0,transition 不会有任何效果。
-
property 为 all 时,要注意 padding 和 margin 的影响,这两个属性也会有过渡效果。
-
使用 transform 时,最好明确指定 property 为 transform。
-
IE9 以下版本不支持。
-
-
示例,进度条
<body> <div></div> </body> <style> div { width: 200px; height: 10px; margin: 100px auto; border: 1px solid red; border-radius: 10px; } div::before { content: ""; display: block; height: 100%; width: 50px; background-color: red; border-radius: 5px; transition: all 2s; } div:hover::before { width: 100%; } </style>
-
效果
九、平面转换 - 2D 转换
2D 转换的效果是让某个元素改变形状,大小和位置。
下面列举了常用的三种方法:
-
移动:
translate
-
旋转:
rotate
-
缩放:
scale
2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系。
1. 2D 转换之移动 (translate)
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
-
语法
transform: translate(x,y); /* 或者分开写 */ transform: translateX(n); transform: translateY(n);
-
示例
div { background-color: lightseagreen; width: 200px; height: 100px; /* 平移 */ /* 水平垂直移动 100px */ /* transform: translate(100px, 100px); */ /* 水平移动 100px */ /* transform: translate(100px, 0) */ /* 垂直移动 100px */ /* transform: translate(0, 100px) */ /* 水平移动 100px */ /* transform: translateX(100px); */ /* 垂直移动 100px */ transform: translateY(100px) /* 水平垂直移动元素自身宽度和高度的一半 */ transform: translate(50%, 50%); }
-
注意
-
x 就是 x 轴上水平移动
-
y 就是 y 轴上水平移动
-
x,y 值不能省略,不移动就写 0
-
2D 的移动主要是指水平、垂直方向上的移动
-
translate 最大的优点就是不影响其他元素的位置
-
translate 的取值可以是像素值 px,也可以是百分比
-
translate 中的百分比单位,是相对于自身的宽度和高度来进行计算的
-
translate 对行内元素没有效果
-
2. 使用 translate 让一个盒子水平垂直居中
<body>
<div>
<span></span>
</div>
</body>
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: lightsalmon;
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
/* 之前的做法 */
/* margin-left: -25px; */
/* margin-top: -25px; */
/* 现在的做法 */
transform: translate(-50%, -50%);
background-color: orangered;
}
</style>
3. 2D 转换之旋转 (rotate)
2D 旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
-
语法
transform: rotate(度数);
-
注意
-
rotate 里面跟度数,单位是 deg
-
角度为正时,顺时针;角度为负时,逆时针
-
默认旋转的中心点是元素的中心点
-
-
示例
transform: rotate(45deg);
4. 使用 rotate 制作三角箭头
之前是用字体图标制作的,现在可以使用 伪元素+rotate 实现。
<body>
<div></div>
</body>
<style>
div {
position: relative;
width: 200px;
height: 25px;
border: 1px solid #ccc;
margin: 100px auto;
}
div::after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(-45deg);
}
</style>
效果:
5. 设置元素旋转中心点 (transform-origin)
-
语法
transform-origin: x-axis y-axis z-axis;
-
参数
-
x-axis
定义旋转轴被置于 X 轴的何处
-
y-axis
定义旋转轴被置于 Y 轴的何处
-
z-axis
定义旋转轴被置于 Z 轴的何处
-
-
注意
-
参数用空格隔开
-
参数值可以是像素 px,百分比 %,方位名词 top、bottom、left、right、center
-
默认旋转的中心点是元素的中心 transform-origin: 50% 50% 0
-
参数 z-axis 只能使用像素值 px
-
6. 2D 转换之缩放 (scale)
scale
用来控制元素的放大与缩小,实质是改变元素的宽度和高度。
-
语法
transform: scale(x, y)
-
注意
-
x 与 y 之间使用逗号进行分隔
-
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大 -
transform: scale(2, 2)
: 宽和高都放大了二倍 -
transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致 -
transform:scale(0.5, 0.5)
: 缩小 -
scale 最大的优势:可以设置转换中心点,默认以元素中心点缩放,而且不影响其他元素的位置
-
7. 2D 转换组合写法以及顺序问题
-
语法
ransform: translate() rotate() scale();
-
注意
-
用空格分开不同转换类型
-
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
-
当同时有 translate 和其他转换的时候,一般将 translate 放到最前面
-
十一、空间转换 - 3D 转换
-
3D 的特点
-
近大远小
-
物体后面遮挡不可见
-
-
三维坐标系
-
x 轴:水平向右。
- 注意:x 轴右边是正值,左边是负值
-
y 轴:垂直向下。
- 注意:y 轴下面是正值,上面是负值
-
z 轴:垂直屏幕。
- 注意:往外边的是正值,往里面的是负值
- 注意:往外边的是正值,往里面的是负值
-
-
工作中常用的 3D 效果
-
3D 位移:
translate3d(x, y, z)
-
透视:
perspctive
-
3D 旋转:
rotate3d(x, y, z, deg)
-
3D 呈现:
transfrom-style
-
1. 3D 移动 (translate3d)
-
语法
transform: translate3d(x, y, z); /*或者分开写*/ transform: translateX(n); transform: translateY(n); transform: translateZ(n);
-
注意
-
x 就是 x 轴上水平移动
-
y 就是 y 轴上水平移动
-
z 就是 z 轴上水平移动
-
3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向,就是 z 轴方向
-
因为 z 轴是垂直屏幕,由里指向外面,所以默认是看不到元素在 z 轴的方向上移动
-
x,y,z 对应的值不能省略,不需要填写用 0 进行填充
-
-
示例
transform: translate3d(100px, 100px, 100px); /* 只在 X 和 Y 轴上移动 */ transform: translate3d(100px, 100px, 0);
2. 透视 (perspective)
-
理解透视
-
Z 轴是视线方向,移动效果应该是距离的远近,电脑屏幕是平面,默认无法观察远近效果
-
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)
-
模拟人类的视觉位置,可以认为安排一只眼睛去看
-
透视我们也称为视距,视距就是人的眼睛到屏幕的距离
-
距离视觉点越近在电脑平面成像越大,越远成像越小
-
-
参考下图
-
d:就是视距,视距就是指人的眼睛到屏幕的距离
-
z:就是 z 轴,z 轴越大(正值),我们看到的物体就越大
-
-
语法
perspective: number|none;
-
注意
-
透视属性需要写在被视察元素的父盒子上面,可以是父亲盒子或者祖父盒子或者更上级
-
透视的单位是像素 px,数值一般是 800 - 1200,符合人类视觉习惯
-
-
示例
body { perspective: 500px; }
3. 3D 旋转 (rotate3d)
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。
-
语法
transform: rotateX(度数); transform: rotateY(度数); transform: rotateZ(度数);
-
注意
- 度数单位是 deg
-
示例
/* 绕 Z 轴旋转 */ transform: rotateZ(45deg);
3.1 左手准则
-
规则
-
左手的手拇指指向 x、y、z 轴的正方向
-
当旋转度数为正值时,其余手指的弯曲方向就是该元素沿着 x、y、z 轴旋转的方向
-
-
示例
3.2 3D 旋转组合写法
-
语法
transform: rotate3d(x, y, z, deg)
-
注意
-
上面写法表示沿着自定义轴旋转 deg 角度
-
x、y、z 是表示旋转轴的矢量,最后一个参数是旋转的角度
-
-
示例
/* 沿着 x 轴旋转 180 度 */ transform: rotate3d(1, 0, 0, 180deg); /* 沿着对角线旋转 180 度 */ transform: rotate3d(1, 1, 0, 180deg);
4. 3D 呈现 (transform-style)
transform-style
属性指定嵌套元素是怎样在三维空间中呈现。
-
语法
transform-style: flat|preserve-3d;
-
注意
-
flat:默认值,表示所有子元素在2D平面呈现
-
preserve-3d:表示所有子元素在3D空间中呈现
-
必须先使用 transform 属性
-
控制子元素是否开启三维立体环境
-
transform–style 属性写在父元素上,父元素中所有子元素都会受影响
-
-
示例
<body> <div class="box"> <div></div> <div></div> </div> </body> <style> body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 100px auto; transition: all 2s; /* 让子元素保持3d立体空间环境 */ transform-style: preserve-3d; } .box:hover { transform: rotateY(60deg); } .box div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; } .box div:last-child { background-color: purple; transform: rotateX(60deg); } </style>
十、动画 (animation)
animation
可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
-
制作动画分为两步
1) 定义动画
2) 使用(调用)动画
-
语法格式(定义动画)
/* 第一种方式 */ @keyframes 动画名称 { 0% { /* 元素某些属性开始时的状态 */ } 100% { /* 元素某些属性结束时的状态 */ } } /* 第二种方式 */ @keyframes 动画名称 { from {} to {} }
-
语法格式(使用动画)
div { /* 调用动画 */ animation-name: 动画名称; /* 持续时间 */ animation-duration: 持续时间; /* 或 */ animation: 动画名称 持续时间; }
-
示例
<style> div { width: 100px; height: 100px; background-color: aquamarine; animation-name: move; animation-duration: 0.5s; } @keyframes move{ 0% { transform: translate(0, 0) } 100% { transform: translate(500px, 0) } } </style>
1. 动画序列
-
0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
-
在 @keyframs 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
-
动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
-
用百分比来规定变化发生的时间,或用
from
和to
,等同于0%
和100%
-
示例
<body> <div></div> </body> <style> /* from to 等价于 0% 和 100% */ /* @keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); } } */ /* 动画序列 */ /* 1. 可以做多个状态的变化 keyframe 关键帧 */ /* 2. 里面的百分比要是整数 */ /* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10 = 2.5s */ @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(1000px, 0) } 50% { transform: translate(1000px, 500px); } 75% { transform: translate(0, 500px); } 100% { transform: translate(0, 0); } } div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 10s; } </style>
-
注意
-
动画序列可以做多个状态的变化
-
动画序列里面的百分比必须是整数
-
动画序列里面的百分比就是总的时间的划分。比如上面的案例: 25% * 10 = 2.5s
-
2. 动画常见属性
-
示例
div { width: 100px; height: 100px; background-color: aquamarine; /* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-in-out; /* 动画等待多长时间执行 */ animation-delay: 2s; /* 规定动画播放次数 infinite: 无限循环 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 动画结束之后的状态 */ animation-fill-mode: forwards; } div:hover { /* 规定动画是否暂停或者播放 */ animation-play-state: paused; }
-
注意
-
animation-delay
只在动画第一次执行时生效,后续交替运行(alternate)或者重复运行时(infinite)是没有延迟的 -
当
animation-iteration-count
的属性值大于 1 时,animation-direction: alternate;
才有效 -
暂停动画
animation-play-state: paused;
经常和鼠标经过(hover)等配合使用 -
要想动画走回来,而不是直接跳回来:
animation-direction: alternate;
-
动画结束后,停在结束位置:
animation-fill-mode: forwards;
-
3. 动画简写方式
-
语法
animation: name duration timing-function delay iteration-count direction fill-mode; animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态;
-
注意
-
简写属性里面不包含
animation-play-state
-
同一个元素的多个动画之间用逗号隔开
-
-
示例
animation: move 2s forwards, run 5s linear infinite;
4. 速度曲线细节
animation-timing-function
规定动画的速度曲线,默认是ease
。
示例-奔跑的熊大:
<div class="bg">
<div class="bear"></div>
</div>
<style>
.bg {
position: relative;
height: 336px;
background: url(media/bg1.png) no-repeat;
}
.bear {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 200px;
background: url(media/bear.png) no-repeat;
/* 同一个标签的多个动画之间用逗号隔开 */
animation: run .4s steps(8) infinite, move 3s forwards;
}
@keyframes run {
from {
background-position: 0, 0;
}
to {
/* 时间函数使用 steps(8),下面的position将被等分为 8 等份,每一步将改变 200px,连在一起就会出现小熊跑起来的效果 */
background-position: -1600px 0;
}
}
@keyframes move {
0% {}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
-
注意
-
主要是时间函数 steps 的应用,叫做逐帧动画。其他属性值生成的是补间动画。
-
将背景图等分成 8 份,使用动画改变 position 属性并且时间函数使用 steps(8),每一帧是一个动作,连起来就是小熊奔跑的画面
-