zoukankan      html  css  js  c++  java
  • CSS3 常用方法Transform,Transition,Animationy

    Transform

      

      transform:rotate():

      含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

      .demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

     

      transform:skew():含义:倾斜;

      .demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

     

      transform:scale():

      含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

      .demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

     

      transform:translate():

      含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

      .demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

     

    Transition

      transition一个速记法:transition: <property> <duration> <animation type> <delay>

    
    
      p {
          -webkit-transition: all .5s ease-in-out 1s;
          -o-transition: all .5s ease-in-out 1s;
          -moz-transition: all .5s ease-in-out 1s;
          transition: all .5s ease-in-out 1s;
      }
     

    Animationy

      

    .flash{
        -webkit-animation-name:flash;
        -webkit-animation-duration:1.5s;
        -moz-animation-name:flash;
        -moz-animation-duration:1.5s;
        -o-animation-name:flash;
        -o-animation-duration:1.5s;
        -ms-animation-name:flash;
        -ms-animation-duration:1.5s;
        animation-name:flash;
        animation-duration:1.5s;
        }
        
    @-webkit-keyframes flash {
        0%, 50%, 100% {opacity: 1;}    
        25%, 75% {opacity: 0;}
    }
    
    @-moz-keyframes flash {
        0%, 50%, 100% {opacity: 1;}    
        25%, 75% {opacity: 0;}
    }
  • 相关阅读:
    批处理
    使用T-SQL语句更新数据、删除
    使用T-SQL语句一次性插入另一张表的数据
    使用T-SQL语句插入数据
    CSS色调旋转滤镜
    初探Lerna
    基层管理人员的部分思考 --读《大秦帝国》有感
    (转)React学习笔记(干货满满)
    git常用命令(转)
    个人JS体系整理(三)
  • 原文地址:https://www.cnblogs.com/lufy/p/2500936.html
Copyright © 2011-2022 走看看