css 3

一、新增子级选择器：

使用>，例如：div > p;

二、兄弟选择器：

使用+，例如：div p+h1;

会选择p标签紧邻的h1标签，如果没有则不选中任何元素

三、其他兄弟选择器：

使用~，例如：div h2~p;会选中div里的h2标签下所有的p标签

四、结构伪类选择器：

:first-child：匹配第一个元素

:last-child：匹配最后一个元素

:nth-child(n)：匹配元素中的第n个；even偶数；add奇数

:first-of-type：指定类型的第一个

:last-of-type：指定类型的最后一个

nth-of-type：指定类型的第n个

五、伪元素选择器：（里面必须加content:""）

::before ：在元素内部的前面插入一个元素

::after：在元素内部的后面插入一个元素

::first-letter：选择容器内的第一个字母

::first-line：选择容器内的第一行文本

添加的元素都为行内元素；

六、属性选择器：

[att]选择具有att属性的元素

[att = "val"]：选择属性为att,属性值等于val的元素

[att^="val"]：选择属性att且val开头的元素

[att$="val"]：选择属性attr且val结束的元素

[att*="val"]：选择属性attr且含有val的元素

input [type="checked"]{
    width:200px;
    height:200px;
}
​
<input type="checked" name="sex" class="icon-dan">运动

七、css3盒模型：box-sizing

属性值：

content-box：标准盒子模型，盒模型是外扩的

border-box：怪异模式，盒模型是内减的

八、边框圆角：border-radius：

属性值：

x-redius/y-radius：前面为水平，后面为垂直方向

redius：水平垂直方向为同一个值，得到的是一个圆角

九、文字阴影：text-shadow：

属性值：

h-shadow：水平阴影位置（必须）

v-shadow：垂直阴影位置（必须）

blur：模糊的距离（可选）

color：阴影的颜色（可选）

text-shadow:3px 3px 5px red;

多层阴影：

text-shadow:3px 3px  red,6px 6px green,9px 9px  rgb(100, 243, 231);

十、盒子阴影：box-shadow：

属性值：有文字阴影的全部属性；

spread：阴影的尺寸

inset：将外部阴影改为内部阴影

/*边框阴影：水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影*/
 box-shadow:20px 20px 10px #f00 inset;

十一、过渡属性：transition

时间曲线常用值：

linear：匀速

ease：逐渐慢下来

ease-in：加速

ease-out：减速

ease-in-out：先加速后减速

/*过渡属性：属性 过渡时间 时间曲线  延迟时间*/
transition:all 2s ease-in 0s;
/*兼容*/
-webkit-transition:all 2s ease-in 0s;

十二、2D转换：

1、属性名：transfrom :位移：transfrom:translate(x,y)；水平和垂直方向位移的距离。

transfrom:translate(x)：只有一个值,表示水平方向的位移。

 .box{
            width:632px;
            height:340px;
            border:1px solid #000;
            margin:100px auto;
      }
/*让图片向右水平平移100px*/
 .box img{
            transform:translate(100px);
        }
/*居中效果*/
transform:translate(-50%);

2、缩放：scale(x,y)：表示宽高

scale(n)：表示宽高同时缩放n倍

scaleX(n)：改变宽度

scaleY(n)：改变高度

3、旋转：rotate(数字deg)：元素旋转；正数表示顺时针，负数表示逆时针；

transform:rotate(-30deg);

4、倾斜：skew(数字deg,数字deg)；水平方向和垂直方向

5、基准点：transform-origin

设置水平方向和垂直方向原点的位置，调整元素的基准点

十三、3D透视：perspective:"500px"：

可以让图片呈现3D的效果。在想要变为3D效果的父级元素上添加

十四、3D旋转：transform：

属性值：

rotateX(数字deg)：沿着X轴3D旋转

rotateY(数字deg)：沿着Y轴3D旋转

rotateZ(数字deg)：沿着Z轴3D旋转

十五、3D位移：transform：

属性值：

translateX(x)：沿着X轴位移；

translataY(y)：沿着y轴位移；

translateZ(z)：沿着z轴位移；

transform-style：用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴。

属性值：

flat：所有元素在2D平面呈现

preserve-3d：保留3D空间

兼容性：chome和Safari需要前缀 -webkit。

Internet Explorer9需要-ms-。

css3动画：

十六、自定义动画：

@keyframes 动画名称{

动画过程

}

@keyframes move {
      /* 从头开始最好保持跟默认样式的状态一致 */
       from{
           transform:translateY(0);
        }
       /* 到结束位置 */
       to{
            transform: translateY(200px);
        }
 }
/* 百分比定义动画 */
@keyframes move2 {
         0%{
             transform: translateY(0);
          }
         25%{
             transform: translateY(150px);
          }
         50%{
             transform: translateY(150px);
          }
          75%{
              transform: translateY(150px);
          }
          100%{
              transform: translateY(150px);
          }