WEB前端CSS—CSS3新特性

CSS3选择器

属性选择器

标签[属性] {
    
}

• 正则：
  • =：配置就是…的标签
  • ^=：匹配以…开头的所有标签
  • $=：匹配以…结尾的
  • *=：匹配只要包含…的标签
• 示例：
  • input[type='submit']：获取所有submit属性的输入框
  • div[class]{} ：选取所有包含class属性的div标签
  • img[class*='girl']{} ：选取所有包含class中包含girl的img标签

伪类选择器

• :first-child：选取其父元素的首个子元素
• :last-child：选取其父元素的最后一个子元素
• :nth-child(n)：选取其父元素的第n个子元素，无论元素的类型
  • 索引从0开始
  • n可以为数字、关键词、公式，如odd或2n+1选取奇数元素
• :nth-last-child(n)：选取其父元素的倒数第n个子元素

伪元素选择器

• E::first-letter：文本的第一个单词或文字
• E::first-line：文本第一行
• E::selection：选中的文本
• E::before：在元素E内容的前面加一个行内块新元素，实际就是加了一个盒子
• E::after：这两个伪元素必须携带content属性，即添加的内容

CSS3盒子模型

• 语法：box-sizing: 属性值;
• 属性值：
  • content-box：外加法，盒子大小为width+padding+border，默认
  • border-box：内减法，盒子大小为width，无需考虑padding撑大盒子

过渡

transition: property duration[ timing-function delay];

属性	描述	属性值
transition-property	应用过渡的css属性名称	如果有多组属性，用逗号隔开；所有属性都过渡all
transition-duration	耗时	必须写单位s(秒)，默认为0
transition-timing-function	运动曲线	ease先快后慢最后非常慢，默认；linear匀速；ease-in越来越快；ease-out越来越慢；ease-in-out先快后慢
transition-delay	开始时间	默认0立即开始

• 过渡transition最好写到本身上，比如div -> div:hover，应该给div而不是div:hover添加过渡效果

2D变形

移动

transform: translate(x,y) | translateX(x) | translateY(y);

• 单位为px或%
• 只写一个参数，如translate(30px)表示仅移动x
• 如果x或y为-50%，那此移动和父亲没关系，是走自己盒子宽高的一半，用于盒子水平居中

缩放

transform: scale(x,y);

• x和y的取值为浮点型，0->0%、0.5->50%、1->100%、2->200%
• 可只写一个参数，scale会一起缩放，区别translate

旋转

transform: rotate(deg);

• 单位为角度deg
• deg>0为顺时针，deg<0为逆时针

倾斜

transform: skew(x,y);

• 单位为角度deg
• 参数可正可负，第二个参数不写默认为0

div {	/* 水平方向倾斜30度,竖直方向不变 */
    transform: skew(30deg); 
}

改变过渡原点

transform-origin: x y;

• 单位方位名词或px

div {	/* 先改变原点到左上角再旋转 */
    transform-origin: left top;
    transform: rotate(45deg);
}

最佳实践

• 多属性过渡：transition: transform 0.5s linear 5s, right 0.5s linear 5.5s;

• 如果transform中含有translate,translateX,translateY，会提高当前元素的层级z-index；所以很多时候transform: translateX(-50%);不能用margin-left:(-...px)代替，不然会出现层级错误

3D变形

移动

translate3d(x,y,z);

旋转

rotateX() | rotateY() | rotateZ();

透视

perspective: 距离px;

• 给父元素加
• 越小，视距越近，效果越明显
• 一般情况下500px就行

其他

• backface-visibility：元素不面向屏幕时是否可见

2d和3d区别

• 3d多了一个参数z轴
• 如果设备有3d加速引擎GPU，在移动端使用3d转换可以优化性能，而2d无法调用GPU

动画

声明动画：

@keyframes 动画名 {
    0%(from) {
        从属性值
    }  
    50% {
        插值
    }
    100%(to) {
        到属性值
    } 
}

调用动画：

选择器 {
    animation: name duration[ timing-function delay iteration-count direction];
}

属性：

属性	描述	属性值
@keyframes	声明动画
animation-name	@keyframes动画的名称	自定义
animation-duration	耗时	默认0
animation-timing-function	运动曲线	默认ease
animation-delay	开始时间	默认0立即开始
animation-iteration-count	播放次数	默认1次；infinite循环播放
animation-direction	下一周期是否逆向播放	默认normal正向；alternate反向
[animation-play-state]	动画运行或暂停	默认running；pause暂停
[animation-fill-mode]	动画时间之外的状态

• 和transition类似，一般只写前两个参数
• animate和transition不能同时执行
• 保持animate动画结束的状态而不是回到起始点，需在最后加forwards
• 如果动画既有旋转rotate又有位移translate，最好是先translate再rotate，因为如果先旋转那么坐标轴也会旋转

伸缩布局

语法:

• 父：

  div {
      display: flex;
      (min-width: 最小宽度; max-width: 最大宽度;) 
  }
  

• 子：

  选择器 {
      flex: 份数;
  }
  

属性:

• flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
• min-width:100px; max-width: 280px;：设置最小/最大宽度
• flex-direction：调整主轴方向；row水平，默认；column垂直

文字阴影

text-shadow: h-shadow[ v-shadow blur color];

属性	含义	是否可选
h-shadow	水平阴影位置，允许负值	必选
v-shadow	垂直阴影位置，允许负值	必选
blur	模糊距离	可选
color	阴影颜色	可选

浏览器前缀

浏览器前缀	浏览器
-webkit-	Chrome,Safari,Android Browser
-moz-	Firefox
-ms-	IE,Edge
-o-	Opera
-khtml-	Konqueror