CSS学习笔记12——CSS3新增特性

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属性

div::before {
    content:'我';
}

• 伪元素选择器和标签选择器一样，权重为1

伪元素清除浮动

.clearfix:after {
    content:"";           /*伪元素必须写的属性*/
    display:block;        /*插入的元素必须是块级元素*/
    height:0;             /*不看见这个元素*/
    clear:both;           /*清除浮动核心代码*/
    visibility:hidden;    /*不看见这个元素*/
}

.clearfix:before,.clearfix:after {
    content:"";
    display:table;          /* 转换为块级元素并且在一行显示 */
}
.clearfix:after {
    clear:both;
}

CSS3盒子模型

可以通过box-sizing指定盒模型

1. box-sizing:content-box （以前默认的）

• 盒子大小为width+padding+border

1. box-sizing:border-box

• 盒子大小为width （padding和border不会撑大盒子）

CSS3其他特性

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

filter:函数（）；
例如：
filter:blur(5px);  /*blur模糊处理 数值越大越模糊 */

calc 函数

calc() 让你在声明css属性值时执行一些计算

width:calc(100%-80px);

括号里可以使用±*/来进行计算

CSS3过渡

当元素从一种样式变换为另一种样式是为元素添加效果

经常和:hover一起搭配使用

transition:要过渡的属性 花费时间 运动曲线 何时开始； /*若写多个属性，用逗号分割*/

1. 属性：想变化的CSS属性，宽/高/背景颜色/内外边距都可以。

若想所有属性都变化过渡，写一个all就可以

1. 花费时间：单位是秒（必须写单位） 如0.5s
2. 运动曲线：默认是ease（可以省略）
3. 何时开始：单位是秒（必须写单位） 可以设置延时触发时间 默认是0s（可以省略）

过渡的使用：谁做过渡给谁加

2D转换

transform可以实现元素的位移、旋转、缩放等效果

• 移动:translate（不会影响其他元素的位置）
• 旋转：retate
• 缩放：scale

---

1. translate移动

transform:translate(x,y); /* 或分开写*/  /* 百分比单位是相对于自身元素的*/
transform:translateX(n);
transform:translateY(n);

让盒子实现水平和垂直居中

p {
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height:200px;
    /*margin-top: -100px;
    margin-left: -100px; */
    transform:translate(-50%,-50%);
}

移动盒子位置：

1. 定位
2. 盒子的外边距
3. 2d转换

---

1. rotate旋转

transform:rotate(度数)

• 度数单位是deg 如rotate(45deg)
• 度数为正则顺时针，负为逆时针
• 默认旋转中心点为元素的中心点

设置转换中心点transform-origin

transform-origin: x y;

• 默认中心点为元素中心点(50% 50%)
• 还可以给xy 设置像素/方位名词（top bottom left right center）

---

3.scale缩放

transform:scale(x,y);

• transform:scale(2)

只写一个参数，则第二个参数和第一个参数一样，相当于 scale(2,2)，宽高都放大两倍

• transform:slate(0.5) 缩小
• 可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D转换综合写法

1. 同时使用多个转换格式

transform:translate() rotate() scale();

1. 其顺序会影响转换效果（先旋转会改变坐标轴方向）
2. 当同时有位移和其他属性时，要将位移放到最前

CSS3动画（animation）

可设置多个节点来精确控制一个/一组动画

1. 定义动画
2. 调用动画

1.keyframes（关键帧）定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

• 动画是元素从一种样式逐渐变为另一种样式的效果。可以改变任意多样式和任意多次数

• 用百分比规定变化发生的时间

  或用关键词"from"和"to"，等同0%和100%

2.元素使用动画

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

动画简写属性

/*animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束的状态*/
animation: myfirst 5s linear 2s infinite alternate;

速度曲线细节

值	描述
linear	匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	以低速开始
ease-out	以低速结束
ease-in-out	以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）