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)，每一帧是一个动作，连起来就是小熊奔跑的画面
-
3136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
