CSS3新增特性
属性选择器
选择符 | 简介 |
---|---|
E[att] | 选择具有att属性的E元素 |
E[att="val"] | 选择具有att属性且属性值等于val的E元素 |
E[att^="val"] | 匹配具有att属性且值以val开头的E元素 |
E[att$="val"] | 匹配具有att属性且值以Val结尾的E元素 |
E[att*="val"] | 匹配具有att属性且值中含有val的E元素 |
类选择器、属性选择器、伪类选择器,权重为10
结构伪类选择器
根据文档结构来选择
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
nth-child(n)选择某父元素的一个/多个特定子元素
- n可以是数字、关键字或公式
- n是数字:选择第n个子元素
- n是关键字:even偶数,odd奇数
- n是公式:从0开始计算,但第0 个元素或超出了元素的个数会被忽略
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15... |
n+5 | 从第五个开始(包含第五个)到最后 |
-n+5 | 前五个(包含第五个)... |
- nth-child会把所有盒子都排列序号
- 执行的时候会先看:nth-child(1) 之后回去看前面的元素
伪元素选择器
可以帮助我们利用CSS创建新标签元素,而不需要HTML标签
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
- before和after创建一个元素,但是属于行内元素
- 新创建的元素在文档树中是找不到的,所以我们称为伪元素
- before和after必须有content属性
css
div::before {
content:'我';
}
- 伪元素选择器和标签选择器一样,权重为1
伪元素清除浮动
css
.clearfix:after {
content:""; /*伪元素必须写的属性*/
display:block; /*插入的元素必须是块级元素*/
height:0; /*不看见这个元素*/
clear:both; /*清除浮动核心代码*/
visibility:hidden; /*不看见这个元素*/
}
css
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 转换为块级元素并且在一行显示 */
}
.clearfix:after {
clear:both;
}
CSS3盒子模型
可以通过box-sizing指定盒模型
- box-sizing:content-box (以前默认的)
- 盒子大小为width+padding+border
- box-sizing:border-box
- 盒子大小为width (padding和border不会撑大盒子)
CSS3其他特性
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
css
filter:函数();
例如:
filter:blur(5px); /*blur模糊处理 数值越大越模糊 */
calc 函数
calc() 让你在声明css属性值时执行一些计算
css
width:calc(100%-80px);
括号里可以使用±*/来进行计算
CSS3过渡
当元素从一种样式变换为另一种样式是为元素添加效果
经常和:hover一起搭配使用
css
transition:要过渡的属性 花费时间 运动曲线 何时开始; /*若写多个属性,用逗号分割*/
- 属性:想变化的CSS属性,宽/高/背景颜色/内外边距都可以。
若想所有属性都变化过渡,写一个all就可以
- 花费时间:单位是秒(必须写单位) 如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位) 可以设置延时触发时间 默认是0s(可以省略)
过渡的使用:谁做过渡给谁加
2D转换
transform可以实现元素的位移、旋转、缩放等效果
- 移动:translate(不会影响其他元素的位置)
- 旋转:retate
- 缩放:scale
- translate移动
css
transform:translate(x,y); /* 或分开写*/ /* 百分比单位是相对于自身元素的*/
transform:translateX(n);
transform:translateY(n);
让盒子实现水平和垂直居中
css
p {
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
/*margin-top: -100px;
margin-left: -100px; */
transform:translate(-50%,-50%);
}
移动盒子位置:
- 定位
- 盒子的外边距
- 2d转换
- rotate旋转
css
transform:rotate(度数)
- 度数单位是deg 如rotate(45deg)
- 度数为正则顺时针,负为逆时针
- 默认旋转中心点为元素的中心点
设置转换中心点transform-origin
css
transform-origin: x y;
- 默认中心点为元素中心点(50% 50%)
- 还可以给xy 设置像素/方位名词(top bottom left right center)
3.scale缩放
css
transform:scale(x,y);
- transform:scale(2)
只写一个参数,则第二个参数和第一个参数一样,相当于 scale(2,2),宽高都放大两倍
- transform:slate(0.5) 缩小
- 可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
2D转换综合写法
- 同时使用多个转换格式
css
transform:translate() rotate() scale();
- 其顺序会影响转换效果(先旋转会改变坐标轴方向)
- 当同时有位移和其他属性时,要将位移放到最前
CSS3动画(animation)
可设置多个节点来精确控制一个/一组动画
- 定义动画
- 调用动画
1.keyframes(关键帧)定义动画(类似定义类选择器)
css
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
-
动画是元素从一种样式逐渐变为另一种样式的效果。可以改变任意多样式和任意多次数
-
用百分比规定变化发生的时间
或用关键词"from"和"to",等同0%和100%
2.元素使用动画
css
div {
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}
动画常用属性
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称(必须) |
animation-duration | 规定动画完成一个周期花费的秒/毫秒 默认0(必须) |
animation-timing-function | 规定动画速度曲线。默认ease |
animation-delay | 规定动画何时开始,默认0 |
animation-iteration-count | 规定动画播放次数,默认1,还有无限循环 infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认normal。 altermate逆向播放 |
animation-play-state | 规定动画是否正在运行或暂停,默认running 还有paused |
animation-fill-mode | 规定动画结束后状态,保持forwards 回到起始backwards |
动画简写属性
css
/*animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态*/
animation: myfirst 5s linear 2s infinite alternate;
速度曲线细节
值 | 描述 |
---|---|
linear | 匀速 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢 |
ease-in | 以低速开始 |
ease-out | 以低速结束 |
ease-in-out | 以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |