CSS3

CSS3的新特性

  • 属性选择器
    • 如 input[value] 必须是input且具有value属性
    • input[type=’text’] 选择属性=值的某些元素
    • div[class^=icon]选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素
    • section[class$=data] 选择首先是section 然后具有class属性 并且属性值必须是data结尾的元素
    • section[class*=data]选择首先是section 然后具有class属性 并且属性值含有data的元素
    • 类选择器和属性选择器 伪类选择器 权重都是 10
  • 结构伪类选择器
    • E:first-child 匹配父元素中的第一个子元素E
    • E:last-child 匹配父元素中最后一个E元素
    • E:nth-child(n) 选择某个父元素的一个或多个个特定的子元素
      • n可以是数字关键字和公式
        • 隔行变色:even(偶数) odd(奇数)
        • nth-child(n) 只能是n这个字母
          • 2n 选择偶数的孩子 2n+1 奇数
          • 5n n+5 -n+5(前五个)
    • E:first-of-type
    • E:last-of-type
    • E:nth-of-type(n)
    • -nth-child 和 nth-of-type的区别
      • 例:section div:nth-child(1)
      • nth-child 会把所有的孩子排序号
      • 执行的时候首先看nth:child(1) 之后回去看前面div
      • section div:nth-of-type(1)
      • nth-of-type会首先看div 指定的元素,之后再去看第几个孩子
  • 伪元素选择器(可以帮助我们利用CSS创建新的标签元素 而不需要HTML标签)
    • 在文档树中找不到
    • 创建的属于行内元素
    • ::before 在元素内部的前面插入内容
    • ::after 在元素内部的后面插入内容
    • before after 必须有content属性
    • 权重是1
    • 可用于清除浮动:额外标签法升级
  • CSS3盒子模型:
    • box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
    • box-sizing:border-box 盒子大小为width
      • padding和border不会撑大盒子(前提padding border宽度不大于width)
  • CSS3图片模糊:
    • 滤镜filter: blur(5px); 数值越大越模糊
  • CSS3渐变(必须添加浏览器私有前缀)
    • -webkit-linear-gradient(起始方向,颜色1,颜色2,…)
    • 起始方向可以是方位名词或者度数 省略的话默认top
  • CSS3 calc函数在声明时计算例:width:calc(100%-80px)
  • CSS3新增属性过渡
    • transition:要过渡的属性 花费时间 运动曲线(默认是ease) 何时开始(默认是0)
      • 例:transition: width .5s ease 0s, height .5s ease 1s
      • 如果想要多个属性都变化 属性写all就可以
        • transition: all 0.5s;
      • 谁来变化给谁加
      • 过渡需要触发
  • 转换(transform)
    • 2D转换 位移
      • 位移:transform:translate(x,y)
      • transform:translateX(100px)
      • transform:translateY(100px)
      • translate元素优点:不会影响其他盒子的位置
      • 参数是百分比移动的距离是盒子的自身的高度或者宽度来对比
      • 实现盒子水平垂直居中:
        • position:absolute top:50% left:50%
        • transform:translate(-50%,-50%)
      • translate对于行内元素是无效的
    • 2D转换 旋转 rotate
      • transform:rotate(xxdeg)
      • 单位是deg 正值顺时针旋转
      • 利用hover和transition实现鼠标放上旋转
      • 设置转换中心点:transform-origin
        • transform-origin:x y;
        • 默认转换中心点是(50%,50%)
        • 或者像素方位名词
    • 2D转换 缩放scale
      • transform:scale(x,y)
      • 里面的数字不跟单位是倍数的意思
      • 等比例缩放两倍transform:scale(2)
      • 优势:不影响其他盒子 可以用transform-origin设置中心点
    • 综合写法
      • transform: translate() rotate() scale()…
      • 注意执行顺序
      • 当同时有位移和其他属性时 要将位移放到最前面

CSS3动画

  • 先定义动画

  • 再使用(调用)动画

  • @keyframes 动画名称{0%{}; 100%{}}

    • 动画序列
      • 0% 100% 动画序列
      • from to等价于0% 100%
      • 可以做多个状态的变化 keyframe关键帧(0% 25% 50% 75% 100%)
      • 百分比要整数
      • 里面的百分比就是总的时间的划分

  • 元素使用动画:

    • animation-name:(动画名称)
    • animation-duration:持续时间

  • 动画常用属性:

    • animation-name 规定@keyframes 动画的名称(必须)
    • animation-duration 规定动画完成一个周期花费的秒或者毫秒(必须)
    • animation-timing-function 运动曲线
    • animation-delay: 何时开始 默认是0
    • animation-iteration-count: 重复的次数 默认是1次 infinite无限
    • animation-direction 是否反方向播放 默认是normal
    • 反方向alternateanimation-fill-mode 规定动画结束时状态 默认backwards回到起始,停到结束状态是forwards
    • animation-play-state:默认是running 暂停paused

  • 动画简写属性:

  • animation: name duration timing-function delay iteration-count direction fill-mode;

  • 速度曲线细节:

    • 默认是ease :低速开始 加快 结束前变慢linear 匀速
    • steps()指定时间函数中间隔数量(步长)

CSS3 3D转换

  • X轴 水平向右 x右边是正值 左边是负值

  • Y轴 垂直向下 Y 下面是正值,上面是负值

  • Z轴 垂直屏幕 往外是正值 往里是负值

  • 3D移动 translate3d

    • transform:translateX()
    • transform:translateY()
    • transform:translateZ() 一般用px
    • transform:translate3d(x,y,z) xyz不能省略 没有就写0

  • 透视perspective(近大远小)

    • 单位是像素

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

      • d: 视距 一个距离人的眼睛到屏幕的距离
      • z: 物体距离屏幕的距离 z越大看到的物体就越大

  • 3D旋转 rotate3d

    • transform:rotateX(45deg) 正值左手准则 沿着x轴方向旋转45deg
    • transform:rotateY(45deg) 正值左手准则 沿着Y轴方向旋转45deg
    • transform:rotateZ(45deg) 沿着z轴正方向旋转45deg
    • transform:rotate3d(x,y,z,deg) 矢量

  • 3D呈现 transform-style

    • 控制子元素是否开启三维立体环境
    • tranform-style:preserve-3d:子元素开启立体空间
    • 代码要写给父级 但是影响的是子盒子