CSS学习-CSS3新特性

2020-05-03

CSS3的现状：

新增的CSS3特性有兼容性问题, ie9+才支持
移动端支持优于 PC端
不断改进中
应用相对广泛

css3主要内容是：新增选择器和盒子模型以及其他特性

1 CSS3新增选择器

CS3给我们新增了选择器，可以更加便捷地、更加自由地选择目标元素。

1.属性选择器

2.结构伪类选择器

3.伪元索选择器

1.1 属性选择器

att是指表单的属性，类选择器、属性选择器、伪类选择器权重都是 10 。

 /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
 input[value] {
            color:pink;
        }
        
/* 只选择 type =text 文本框的input 选取出来 */
 input[type=text] {
        color: pink;
        }
        
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
 div[class^=icon] {
            color: red;
        }

/*class属性值必须是以data结尾*/
section[class$=data] {
            color: blue;
        }

1.2 结构伪类选择器

/* 1. 选择ul里面的第一个孩子 小li */
ul li:first-child {
	background-color: pink;
}

/* 2. 选择ul里面的最后一个孩子 小li */
ul li:last-child {
	background-color: pink;
}

/* 3. 选择ul里面的第2个孩子 小li */
ul li:nth-child(2) {
	background-color: skyblue;
}

1）nth-child(n)

选择某个父元素的一个或多个特定的子元素

n可以是数字 ,关键字和公式
n如果是数字,就是选择第n个子元素，里面数字从1开始…
n可以是关键字:even偶数,odd奇数

/* 1.把所有的偶数 even的孩子选出来 */
 ul li:nth-child(even) {
        background-color: #ccc;
   }

n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

/* nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
ol li:nth-child(n) {
	background-color: pink;
}

/* nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
ol li:nth-child(2n) {
	background-color: pink;
}

2）nth-of-type

nth-of-type 和 nth-child 都可以选中元素的孩子，但是nth-of-type使用起来更加灵活。

如下面的html结构，想要选择section下的第二个子标签

<section>
    <p>光头强</p>
    <div>熊大</div>
    <div>熊二</div>
</section>

使用 nth-child，无法选择第二个子元素，因为nth-child会提前给所有的孩子进行编号。

/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */

section div:nth-child(1) {
    background-color: red;
}

使用nth-of-type


 /* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
    background-color: blue;
}

1.3 伪元素选择器(重点)

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意:

● before 和 after 创建一个元素 ,但是属于行内元素

● 创建的这个元素在文档树中是找不到的,所以我们称为伪元素

● 语法: element::before {}

● before和after必须有content属性

●before在父元素内容的前面创建元素, after 在父元素内容的后面插入元素

●伪元素选择器和标签选择器一样,权重为1

伪元素使用场景：添加字体图标、遮罩层这些样式相关

/*添加字体图标*/
div::after {
         position: absolute;
         top: 10px;
         right: 10px;
         font-family: 'icomoon';
         content: ''; 
         color: red;
         font-size: 18px;
     }

/*设置遮罩层*/
.tudou::before {
     content: '';
     /* 隐藏遮罩层 */
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
 }

 /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
 .tudou:hover::before {
     /* 而是显示元素 */
     display: block;
 }

2 css3盒子模型

CSS3中可以通过box-sizing来指定盒模型, 有2个值:即可指定为content- box. border-box ,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

1.box sizing: content-box盒子大小为width + padding + border ( 以前默认的)

2.box sizing: border-box盒子大小为width

如果盒子模型我们改为了box sizing: border-box，那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

3 CSS3其他特性(了解)

3.1 CSS3滤镜filter

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

filter:函数(); 例如: filter: blur(5px); blur模糊处理数值越大越模糊。

3.2 CSS3 calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

1	width: calc(100%-80px);

括号里面可以使用+ - * /来进行计算。

3.3 CSS3过渡(重点)

transition语法：

1	transition:要过渡的属性花费时间运动曲线何时开始;

1.属性:想要变化的Css属性，宽度、高度、背景颜色、内外边距等都可以。如果想要所有的属性都变化过渡，写一个all 就可以。

2.花费时间:单位是秒(必须写单位)比如0.5s

3.运动曲线:默认是ease(可以省略)

4.何时开始: 单位是秒(必须写单位)可以设置延迟触发时间默认是Os ( 可以省略)

过渡的使用口诀:谁做过渡给谁加

div {
    width: 200px;
    height: 100px;
    background-color: pink;
     transition: height .5s ease 1s;  
     
    /* 如果想要写多个属性，利用逗号进行分割 */
     transition: width .5s, height .5s; 
    
    /* 如果想要多个属性都变化，属性写all就可以了 */
    transition: all 0.5s;
}
div:hover {
    width: 400px;
    height: 200px;
    background-color: skyblue;
}

3.4 2D转换

转换( transform )是CSS3中具有颠覆性的特征之一, 可以实现元素的位移、旋转、缩放等效果转换( transform )你可以简单理解为变形：

translate .
rotate
scale

1）二维坐标系

2） 2D特換之移动translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。

语法

1
2
3

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

定义2D转换中的移动,沿着X和Y轴移动元索
translate最大的优点 :不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的 translate:(50%, 50%);
对行内标签没有效果

3）盒子实现水平居中和垂直居中

通过transform: taslate(-50%, -50%);，不需要知道居中盒子的宽度和高度就可以使盒子实现垂直居中。

position: absolute;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

background-color:purple;

/* margin-top: -189px;

margin-left: 190px; */

transform: taslate(-50%, -50%);

4）2D旋转

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法

1	transform: rotate (度数)

●rotate里面跟度数，单位是deg比如rotate(45deg)

●角度为正时 ,顺时针,负时，为逆时针

●默认旋转的中心点是元索的中心点

2D转换中心点

transform-origin我们可以设置元索转换的中心点

语法

1	transform-origin: x y:

●注意后面的参数 x 和y 用空格隔开

●xy默认转换的中心点是元素的中心点(50% 50%)

●还可以给xy设置像素或者方位名词( top bottom left right center )

5） 2D转换之缩放scale

缩放,顾名思义,可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法

1	transform:scale(x,y);

●注意其中的x和y用逗号分隔

●transform:scale(1,1) : 宽和高都放大一倍.相对于没有放大

●transform:scale(2,2) : 宽和高都放大了2倍

●transform:scale(2) : 只写一个参数，第二个参数则和第一个参数一样, 相当于scale(2,2)

●transforrm:scale(0.5,0.5) :缩小

●sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子的布局

2D转换综合写法

注意:

1.同时使用多个转换,其格式为: transform: translate() rotate() scale()..等,

2.其顺序会影转换的效果。( 先旋转会改变坐标轴方向)

3.当我们同时有位移和其他属性的时候,记得要将位移放到最前

3.5 CSS3动画

动画( animation )是CSS3中具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

动画的基本使用制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

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

    100%{
        width: 200px;
    }
}

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。

●在 @keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。

●动画是使元素从一种祥式逐渐变化为另一种样式的效果。您可以改变任意的样式任意多的次数。

●请用百分比来规定变化发生的时间,或用关键词”from”和”to” ,等同于0%和100%。

2.元素使用动画

div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /*调用动画*/
    animation-name :动画名称;
    /*持续时间*/
    animation-duration:持续时间;
}

3.6 3D转换

三维坐标系

1）3D移动translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向 ,就是z轴方向。

●translform:translateX(100px) : 仅仅是在x轴上移动。

●translform:translateY(100px) : 仅仅是在Y轴上移动。

●translform:translateZ(100px) :仅仅是在Z轴上移动(translateZ一般用px单位)，Z值越大，盒子越大，z值越小盒子越小。z是0，盒子保持正常大小。

●transform:translate3d(x,y,z) :其中x、y、z分别指要移动的轴的方向的距离。

2）透视perspective

透视我们也称为视距:视距就是人的眼睛到屏幕的距离，距离视觉点越近的在电脑平面成像越大,越远成像越小。

透视的单位是像素

透视写在被观察元素的父盒子上面的

1	perspective: 500px; //数值越小，盒子越大

3）3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转。

语法

●transform:rotateX(45deg) :沿着x轴正方向旋转45度

●transform:rotateY(45deg) : 沿着y轴正方向旋转45deg

●transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg

●transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)

x轴旋转的正方向

transform:rotateX(-45deg) 是沿着左手准则相反的方向。

y轴旋转的正方向

4 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。

1.私有前缀

●-moz- :代表firefox浏览器私有属性

●-ms- :代表ie浏览器私有属性

●-webkit- :代表safari, chrome 私有属性

●-o- :代表Opera私有属性

2.提倡的写法

比如我们要写一个border-radius属性，考虑兼容性可以这样写：

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;