zoukankan      html  css  js  c++  java
  • css3变形及动画的小知识点

    1.变形-旋转rotate()

    <div class="wrapper">
     <div><span>我不想旋转</span></div>
    </div>
    .wrapper span {
      display:block;  //特别注意,使用这个属性时需要把非块元素转化为块元素
     -webkit-transform:rotate(20deg);
     -moz-transform:rotate(20deg);
      transform:rotate(20deg);
     }

    2.变形-扭曲skew()

    扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状。

    div{
      -webkit-transform:skew(-45deg);
      -moz-transform:skew(-45deg);
      transform:skew(-45deg);
    }

    3.变形-缩放scale()

    缩放 scale()函数 让元素根据中心原点对对象进行缩放。

    缩放 scale 具有三种情况:

    I、 scale(X,Y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。例如:

    div:hover {
      -webkit-transform: scale(1.5,0.5);
      -moz-transform:scale(1.5,0.5)
      transform: scale(1.5,0.5);
    }

    II、scaleX(x)元素仅水平方向缩放(X轴缩放)

    div:hover {
      -webkit-transform: scaleX(1.5);
      -moz-transform:scaleX(1.5)
      transform: scaleX(1.5);
    }

    III、scaleY(y)元素仅垂直方向缩放(Y轴缩放)

    4、变形-位移 translate()

    translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。

    <div class="wrapper">
    我不知道我的宽度和高是多少,我要实现水平垂直居中    
    </div>
    .wrapper {
      padding: 20px;
      background:orange;
      color:#fff;
      position:absolute;
      top:50%;
      left:50%;
      border-radius: 5px;
      -webkit-transform:translate(-50%,-50%);
      -moz-transform:translate(-50%,-50%);
      transform:translate(-50%,-50%);
    }
    

    5.定位圆点 transform-origin  

    在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们可以通过transform-origin来对元素进行原点位置改变,使元素原点不在元素的中心位置,以达到需要的原点位置。transform-origin取值和元素设置背景中的background-position取值类似:

    示例展示:

    通过transform-origin改变元素原点到左上角,然后进行顺时旋转45度。

    <div class="wrapper">
      <div>圆点定位在左上角</div>
    </div>
    .wrapper div {
      background: orange;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }

    6.动画transition 

    div{
    100px;
    -webkit-transition: all .5s ease-in .18s; // 表示所有属性在0.18s后触发动画,以ease-in的速度曲线,历时0.5秒
    }
    div:hover{
      200px;
    }

    7.动画 animation  关键帧 keyframes 的使用:

    .box{
    -webkit-animation: 1s animate_box ease infinite;
    //表示动画持续时间为1s,动画名字是animate_box,变化曲线,infinite表示无限循环播放,控制动画播放次数,也可以换成其他数字,不写的话相对于1,只播放一次
    }
    
    //规定动画各个阶段的状态和动画名字
    @-webkit-keyframes animate_box{
    0%{background-position: 0 0;}
    50%{
    background-position: -243px 0;}
    100%{background-position: -486px 0;}
    }

    还有另外一种效果 ,steps( )的用法

    .box.animate{
    -webkit-animation: 1s animate_box steps(2) infinite;
    //steps(2)表示每个关键帧分两步播放,比如0%到50%这段动画中再分两步播放
    }
    @-webkit-keyframes animate_box{
    0%{background-position: 0 0;}
    50%{background-position: -243px 0;}
    100%{background-position: -486px 0;}
    }

    8.动画 animation 与transiton的区别是:I、transiton 单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点击,悬浮等)触发,没法再网页加载时自动发生,他可触发的方式有: :hoever :focus :checked 媒体查询触发 ,js触发

    transition的发生是一次性的,不能重复发生,除非再次触发。只能定义开始和结束状态,不能定义中间状态。一条transition规则只能定义一个属性的变化,不能涉及多个属性。

    而 animation 可以在没有触发事件的情况下随时间变化改变属性,而且还可以重复,可以定义很多状态,从而达到动画效果。

    9、让动画最终的状态停止在自定义的状态而非原始状态的方法

    //把属性分开写是这样
    -webkit-animation-fill-mode: forwards;
    -webkit-animation: 1s animate_box ease forwards;
    //把属性合起来写是这样

     10、设置动画的播放状态

    <div><span></span></div>
    div span{
        animation-play-state:running; //本来是播放状态
    }
    div span:hover{
        animation-play-state:paused; //鼠标悬浮是停止状态
    }
  • 相关阅读:
    PHP保留小数的相关方法
    ASP.NET Core MVC 之过滤器(Filter)
    ASP.NET Core MVC 之控制器(Controller)
    ASP.NET Core MVC 之视图组件(View Component)
    ASP.NET Core MVC 之局部视图(Partial Views)
    标签助手(TagHelper)
    ASP.NET Core MVC 之布局(Layout)
    ASP.NET Core MVC 之视图(Views)
    ASP.NET Core MVC 之模型(Model)
    九卷读书:淘宝从小到大的发展 -重读《淘宝技术这十年》
  • 原文地址:https://www.cnblogs.com/javenlee/p/7019408.html
Copyright © 2011-2022 走看看