css3新增

目录

一、新增选择器

1、层次选择器

2、结构伪类选择器

3、属性选择器

4、伪元素选择器

 5、UI元素伪类

二、新增样式

1、文本阴影

2、盒子阴影

3、定义字体

4、渐变

线性渐变

径向渐变

 三、变换移动

1、变换transform

1）.移动translate translateX translateY

2）.旋转rotate 单位deg

3）.缩放scale（0<1缩小、>1放大）

4）.倾斜skew

2、过渡transition:all 5s ease 0s

1）.（过渡的属性）

2）.（过渡/持续时间）单位s、ms 1s=1000ms

3）.（过渡的速度）transition-timing-function

4）.（延迟时间）单位s、ms 1s=1000ms

 五、动画

一、新增选择器

1、层次选择器

        E>F：E的子元素F  
        E F：E的后代F  
        E+F: E的相邻的兄弟F
        E~F: E的通用兄弟F 

2、结构伪类选择器

E:nth-of-type(n):第几个类型E   even偶数    odd奇数

E:first-of-type     第一个

E:last-of-type      最后一个

E:not([class="active"])      所有E中除了类名为active的E

3、属性选择器

 E[attr]{}

E[attr="value"]{} 完全匹配

E[attr~="value"]

E[attr^="value"] 以value开头的所有的元素

E[attr$="value"] 以value结尾的所有的元素

E[attr*="value"] 不管开头结尾还是中间 只要含value的所有的元素

E[attr|="value"] 以value开头或者value-开头的所有的元素

4、伪元素选择器

::befroe ::after

::frist-line:第一行

::first-letter:第一个字符

::selection:选中的字符

 5、UI元素伪类

焦点事件

input[type="text"]:focus{

        background-color:lightblue;

}

选出有disabled(禁用)属性的input标签

input:disabled{

        background-color: red;

}

选出有enabled(可用)属性的input标签

input:enabled{

        text-align: center;

}

选出有checked属性的input标签

input:checked{

        width: 20px;

        height: 20px;

}

二、新增样式

1、文本阴影

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

h-shadow 必需、水平阴影的位置、允许负值

v-shadow 必需、垂直阴影的位置、允许负值

blur 可选、模糊的距离

color 可选、阴影的颜色

2、盒子阴影

box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

x轴偏移量 必需、水平阴影的位置、允许负值

y轴偏移量 必需、垂直阴影的位置、允许负值

阴影模糊半径 可选、模糊的距离

阴影扩展半径 可选、阴影的尺寸

阴影颜色 可选、阴影的颜色、省略默认为黑色

投影方式 可选（设置 inset 时为内部阴影方式、如果省略为外部阴影方式）

3、定义字体

/* 定义字体 */

@font-face {

        font-family: ; /* 定义字体名称 */

        src: url() ; /* 导入字体 */

}

/* 使用字体 */

font-family: " " ;

4、渐变

线性渐变

background:linear-gradient(to 方向,颜色1 %,颜色2 %，.......)

径向渐变

background:radial-gradient(shape size at position,颜色 0%,颜色 50%,颜色 100%)

shape 形状

• ellipse (默认): 指定椭圆形的径向渐变。
• circle ：指定圆形的径向渐变

size 大小

• farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
• closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
• closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
• farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position位置

• center（默认）：设置中间为径向渐变圆心的纵坐标值。
• top：设置顶部为径向渐变圆心的纵坐标值。
• bottom：设置底部为径向渐变圆心的纵坐标值。

 三、变换移动

1、变换transform

多个值tranform的值写在一起用空格隔开

变换基点、轴心定位transform-origin:;

1）.移动translate translateX translateY

        translate(Xpx,Ypx)

2）.旋转rotate 单位deg

        rotateX()

        rotateY()

        rotate(Xdeg,Ydeg)

        透视 perspective: ;

        背面不可见：backface-visibility:;

3）.缩放scale（0<1缩小、>1放大）

        scaleX()

        scaleY()

        scale(X,Y)

4）.倾斜skew

        skew(Xdeg,Ydeg)

2、过渡transition:all 5s ease 0s

1）.（过渡的属性）

transition-property: ; （用逗号隔开）

transition-property: all ;

2）.（过渡/持续时间）单位s、ms 1s=1000ms

transition-duration:;

3）.（过渡的速度）transition-timing-function

ease 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 加速后减速

cubic-bezier(x1,y1,x2,y2); 0<x,y<1

4）.（延迟时间）单位s、ms 1s=1000ms

transition-delay:;

简写

transition:all 过渡时间 过渡速度 延迟时间

 五、动画

定义关键帧

animation:动画名称 过渡时间 延迟时间 过渡效果 往返 循环次数[infinite] 起始状态

@keyframes name{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(500);

    }

}

animation-name:关键帧名字

animation-duration:持续时间

animation-delay:延迟时间

animation-timing-function:速度

        ease/linear/ease-in/ease-out/ease-in-out

animation-iteration-count: ; 播放次数

        infinite 无限

animation-direction: ; 可以往返

        alternate 从第一帧开始往返

        reverse 从最后一帧开始，但不往返

        alternate-reverse 从最后一帧开始往返

        normal 默认 从第一帧开始 不往返

animation-fill-mode:有延迟时间才会看到起始状态

backwards:开始时显示第一帧的状态，否则显示默认设置的状态

forwards:结束时保持最后最后一帧的状态，否则显示默认设置的状态

both:两则都要