CSS3的chapter5

  变形样式——transform:

    • translate()                              ——指定对象的2D translation(2d平移)
    • transform-origin                      ——指定元素的中心点,默认为元素x轴和y轴的50%处
    • translateX()                            ——指定对象X轴(水平方向)的平移
    • translateY()                            ——指定对象Y轴(垂直方向)的平移
    • rotate()                                  ——指定对象的2d rotation(2d旋转),需先有transform-origin 属性
    • scale()                                    ——指定对象的2d scale(2d缩放)
    • scaleX()                                  ——指定对象X轴(水平方向)的缩放
    • scaleY()                                  ——指定对象Y轴(垂直方向)的缩放
    • skew()                                    ——指定对象的skew transformation(斜切扭曲)
    • skewX()                                  ——指定对象X轴(水平方向)的扭曲
    • skewY()                                   ——指定对象Y轴(垂直方向)的扭曲
    • translate3d()                       指定对象的3d位移,参数不能省略

  过渡动画——transition

    • 过渡属性            ——transition-property
         用法:
        1.在默认样式中声明元素的初始样式
            2.声明过渡元素的最终样式
            3.在默认样式中添加过渡函数

        基本上可以把以上属性归纳为带有数值的
      属性,都支持过渡动画(其中visibility可以看成
      是0和1,它可以常常搭配opacity属性,来实现一
      个元素渐隐渐显并最终隐藏或显示)。最简单写法
      是直接用all代表所有属性

    • 过渡所需时间      ——transition-duration
            设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间
    • 过渡函数            ——transition-timing-function
      ease 默认值,逐渐变慢
      linear 匀速过渡
      ease-in 加速
      ease-out 减速
      ease-in-out 加速然后减速
      cubic-bezier 自定义
                                  等等 
    • 过渡延迟时间      ——transition-delay
            指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行
    • 缩写    
    • transition: all .5s ease-in .1s;

   自定义动画:

    • 动画名称——animation-name
    • 关键帧——@keyframes
      @keyframes fromTopToBottom{
      from{height:25px;}
      to{height:150px;}
      }
    • 动画时间——animation-duration

    • 动画的过渡函数——animation-timing-function
      ease 默认值,逐渐变慢
      linear 匀速过渡
      ease-in 加速
      ease-out 减速
      ease-in-out 加速然后减速
      cubic-bezier 自定义
                                  等等 
    • 动画延迟时间——animation-delay
    • 动画执行次数——animation-itertion-count
    • 动画顺序——animation-direction
      • normal——正常方向
      • reverse——反方向
      • alternate——先正常再反方向,并交替运行
      • alternate-reverse——先反方向再正方向运行,并交替运行
    • 动画状态——animation-play-state
      div:hover{
      animation-play-state:paused || running;
      }
    • 动画运行时间以外的状态——animation-fill-mode
      • none:默认值,不设置
      • forwards:动画结束的状态
      • backwards:动画开始的状态
      • both:结束或开始的状态
    • 缩写  
      animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction

      代码:

      <style type="text/css">
      div{
      font-size:100px;
      color: white; width:0px;
      height:100px;
      background-color:red; -webkit-animation-name:div1; -webkit-animation-duration:5s; -webkit-animation-timing-function:ease-in-out; -webkit-animation-delay:.5s; -webkit-animation-iteration-count:1; -webkit-animation-direction:alternate; -webkit-animation-fill-mode:both;
      }
      div:hover{
      -webkit-animation-play-state:paused;
      }
      @-webkit-keyframes div1{
      0%{width:0; background-color:red;}
      25%{width:250px; background-color:black;}
      50%{width:500px; background-color:gray;}
      75%{width:750px; background-color:black;}
      100%{width:1000px; background-color:red;}
      }

                          


  

上一篇:HIbernate学习笔记1 之 简介


下一篇:Delphi CxGrid 汇总(3)