CSS3 简单入门

CSS3 简单入门

十一月 28, 2016 阅读 466 字数 2362 评论 0 喜欢 2

CSS3动画

      Tips:

      • transition 过渡 过渡的时间 过渡的延迟等
      • transform 转换的意思 移动 X、Y 轴 旋转等
        1.translate() X Y 轴 有translateX() 和 translateY() 单独设置 XY
        2.rotate() 在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
        3.scale() 放大倍数该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数 设置一个参数 就是等比例缩放 设置两个参数就是分别XY轴缩放倍数
        4.skew() 该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:
        5.matrix() 方法和2D变换方法合并成一个。 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

      渐变色

      背景色渐变

      #box{
          /* 开始以及结束的颜色 */
          background:-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
      
          background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
      
          background:-ms-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
      
          background:-mox-linear-gradient(bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
      }
      

      2D转换效果

      transform 移动位置

      translate(x,y) 此属性的移动到的位置
      translateX() X轴移动多少位置
      translateX() Y轴移动多少位置

      transition 过度动画

      参数一 执行过度效果的css属性()

      参数二 执行过度效果持续的事件(单位是秒 , 可以写小数)

      参数三 在执行过度的速度曲线(匀速 加速 减速)

       

      默认值 ease 先快 然后平缓;
      linear 匀速执行;

       

      参数四 延迟多长时间执行

      Tips: 不同的浏览器兼容性不一样
      Chrome: -webkit-transition();
      IE: -ms-transition();
      FireFox:-moz-transition();

      缩放

      transform:scale(缩放的倍数);

      Tips:最好加上浏览器兼容性的处理

      旋转

      旋转的度数
      transform:rotate(360deg);
      设置旋转的中心
      transform-origin:left bottom;左下角为旋转中心

      3D动画

      transform:rotateX(180deg);x轴 旋转180度

      transform:rotateY(180deg);y轴 旋转180度

      自定义动画

      1.定义动画

      @keyframes 动画的名称 =>定义动画

      通过百分数拆分动画,可分别设置不同百分数过程中的动画

          @keyframes mymove{
              0%{left:0;top:0}    /*开始的样式 左边0 上边0*/
              25%{left:300px;top:0}    /*四分之一的样式 左边300px 上边0*/
              50%{left:300px;top:300px}    /*四分之二的样式 左边300px 上边 300px*/
              75%{left:0;top:300px}    /*四分之三的样式 左边0 上边 300px*/
              100%{left:0;top:0}    /*四分之四的时候的样式 左边0 上边0*/
          }
      

      2.调用动画 animation:动画名称 执行的时间

          #box{
              position:absolute;
              animation:mymove 1s;
          }
      

      animation-timing-function 速度曲线

      animation-iteration-count 播放次数

      默认1
      infinite 循环播放

      animation-direftion 是否逆向播放

      默认是 normal
      alternate 逆向播放

      调用自定义动画的参数

      1. 自定义动画名称
      2. 动画执行时间
      3. 动画速度曲线
      4. 延迟执行时间
      5. 播放次数 默认1 infinite 表示循环播放
      6. 下一动画周期 是 正常播放还是逆向播放
      7. 播放状态 animate-play-state通常单独使用,如果paused表示暂停

      animation-play-state 动画播放状态

      默认是:running
      paused 暂定

      动画执行完毕 保留动画最终位置

      通过属性 animation-fill-mode 设置
      默认是回到目的地
      forward 是停止在目的地

      CSS3新增的选择器(常用的)

      li:first-child <li>标签中的第一个元素

          ul li:first-child{
              colro:red;
          }
      

      li:last-child <li>标签中的最后一元素

      li:nth-child(n) <li>标签中的第n个元素

      li:nth-of-type(n) 类型中的第n个li元素

      second 中 第 n 个li 元素

          #second li:nth-of-type(n){
              color:pink;
          }
      

      TIPS:索引由1开始

      视口

      <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
      

      device-width 按照设备分辨率渲染网页
      initial-scale=1.0 初始比例 1.0 不放大不缩小
      maximum-scale=1.0 最大1.0倍
      user-scalable=no 不允许用户放大缩小

      SPA Single Page Apps 单页面应用

      原理: 点击的所有连接都在一个页面中 通过控制页面的显示隐藏 实现页面的切换

      HTML5 webApp HybridApp(混合App)
      HTML+CSS+JavaScript(AngularJs+ionic)