*********h5+css3笔记

1.css3 新增选择器

同种类型的第几个

h3:nth-of-type(2){

      clear: red;

    }

父元素下第几个子元素，不区分不同的标签

    h3:nth-child(3){

      color: red;

    h3~p{

      color: red;

    }

属性选择器

    [title="这是个标题"]{

      color: red;

    }

属性值是否包含某个值 要求属性值为空格分割线

    [class~="cls"]{

      color: blue;

    [class *="cls"]{

      color: blue;

    }

以某个属性结尾的不需要分割线隔开

    [class^='cls']{

      color: blue;

    }

以某个属性结尾的不需要分割线隔开

    [class$='cls']{

      color: blue;

    }

    :disabled{

      border: 3px solid rgb(247, 4, 4);

标签的属性  ! 目标元素属性

    :target{

      /* 给目标元素设置样式 */

汉字默认可以在任何地方进行换行，所以说一般汉字不会出现水平滚动英文的会在空格或

   /* 最后一个子元素并且是 p 标签 */

    p:last-child{

      width: 600px;

      height: 100px;

      border: 1px solid #000;

    }

第一个单词

    p::first-letter{

      color: red;

      font-size: 30px;

    p::selection{

      background-color: yellow;

    }

给空标签设置样式

    :empty{

      width: 100px;

      height: 100px;

      background-color: red;

    }

    }

    #top:active{

2.transform2D 转换

平移变换

      transform: scale(2);

旋转变换 正值顺时针

transform: rotateY(45deg) rotateX(-45deg);

倾斜变换

      transform: skewX(30deg);

多种同时

transform: rotateY(180deg) scale(2) skewX(30deg) translateX(-

200px);

3.过渡动画 transion

过渡动画：只能实现两个状态之间的变化，只能实现一些简单的动画效果

 指的是所有可以过度的属性，和数字有关既是可以过度的

      transition-property: width; 指定宽度

过渡时间

过渡方式

      transition-timing-function: linear;

      background-size: 100% 100%;

      background-repeat: no-repeat;

背景图是否跟着页面滚动，默认情况是滚动  ，非滚动是 $

      background-attachment: fixed;

背景色和图片

      background: #aaa url(../../图片/jpg.jpg) no-

背景图大小

      background-size: 100px 100px;

背景颜色的裁剪方式，默认   ，是从边框外部开始渲染

      background-clip: padding-box; 从内边距开始

从内容区域开始渲染的，不包括内边距

      background-clip: content-box;

起始点，   是从边框开始渲染，包含边框

      background-origin: border-box;

从盒子内容进行布局渲染

background-origin: content-box;

!从内边距开始，包括内边距

background-origin: padding-box;

5.边框

      /* 参数 1 是元素上半部分剪切的部分 0 说明上半部分剪完了

      /* 参数 4 是元素左半部分剪切的部分 */

      clip: rect(0px auto 35px 0px);

   

官方建议采用 具体值 (具体值 

border-radius: 50px/50px;

border-radius:50px 50px 50px 50px/50px 50px 50px 50px;

border-radius: 5px 10px;

值 ' 是水平方向的半径，值 ) 是竖直方向的半径

border-top-left-radius: 50px 100px;

      border-top-right-radius: 50px 100px;

      border-bottom-left-radius: 50px 100px;

6.阴影

*

参数：' 水平偏移 ) 竖直偏移 & 模糊程度（值越小越清晰） + 阴影的延展度（值越大延展

7.渐变

 ! 渐变函数 参数 '：渐变的方向可以写度数，也可以写一些特殊的值，其他

background: linear-gradient(to bottom ,red ,blue,green);

一个数值代表的是位置

background: linear-gradient(to bottom,red 0,blue

33%,green 66%,black 100%);

background: linear-gradient(-45deg, red 0 33%,blue 33%

66%,green 66% 77%,black 100%);

 圆形

background-image: -webkit-radial-gradient(center center,

circle,red 5%,green 15%,blue 60%);

椭圆形，必须是长方形

filter: grayscale(1);

图片变亮 曝光

filter: brightness(200%);

 高斯模糊函数

filter: blur(5px);

透明度

filter: opacity(50%)

9.关键帧动画 animaon

      0%{

        transform: scaleY(0.4);