zoukankan      html  css  js  c++  java

  • LoraLU

    一、定义动画过程中形成的状态用transform

    transform 分为2D 和 3D，主要包含以下几种变换：旋转rotate、扭曲skew、缩放scale和移动 translate以及矩阵变形matrix，语法如下：

    1
    transform: rotate | scale | skew | translate |matrix;
    旋转 描述
    rotate(angle) 定义 2D 旋转，在参数中规定角度
    rotate3d(x,y,z,angle) 定义 3D 旋转
    rotateX(angle) 定义沿着 X 轴的 3D 旋转
    rotateY(angle) 定义沿着 Y 轴的 3D 旋转
    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转

    rotate 的单位是deg 度，正数表示顺时针旋转，负数表示逆时针旋转。

    缩放 描述
    scale(x,y) 定义 2D 缩放转换
    scale3d(x,y,z) 定义 3D 缩放转换
    scaleX(x) 通过设置 X 轴的值来定义缩放转换
    scaleY(y) 通过设置 Y 轴的值来定义缩放转换
    scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换

    scale 的取值范围是0~n，小于1时表示缩小，反之表示放大。例如scale(0.5, 2)表示水平方向缩小1倍，垂直方向放大1倍， 另外，也可以通过scaleX或者scaleY对一个方向进行设置。

    扭曲 描述
    skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
    skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
    skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换

    skew 的单位跟rotate一样都是deg 度。例如 skew(30deg, 10deg)表示水平方向倾斜30度，垂直方向倾斜10度。

    偏移 描述
    translate(x,y) 定义 2D 转换
    translate3d(x,y,z) 定义 3D 转换
    translateX(x) 定义转换，只是用 X 轴的值
    translateY(y) 定义转换，只是用 Y 轴的值
    translateZ(z) 定义 3D 转换，只是用 Z 轴的值

    偏移同样包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。

    二、定义动画过程用animation或者transition

    transition

    transition允许css的属性值在一定的时间区间内平滑地过渡，语法如下：

    1
    transition ： transition-property transition-duration transition-timing-function transition-delay [, ...]

    • transition-property :用来指定执行transition效果的属性，可以为 none,all或者特定的属性
    • transition-duration: 动画执行的持续时间，单位为s（秒）或者 ms（毫秒）
    • transition-timing-function:变换速率效果，可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定义时间曲线）
    • transition-delay:用来指定动画开始执行的时间，取值同transition-duration，但是可以为负数

    animation

    CSS3 中的 animation 是通过一个叫Keyframes关键帧的玩意来控制的，他的命名是由”@keyframes”开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个”@keyframes”中的样式规则是由多个百分比构成的，如“0%”到”100%”之间，语法如下：

    1
    大专栏  LoraLU">2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @keyframes IDENT {
      from {
        Properties: Properties value;
      }
      Percentage {
        Properties: Properties value;
      }
      to {
        Properties: Properties value;
      }
    }

    或者全部写成百分比的形式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @keyframes IDENT {
      0% {
        Properties: Properties value;
      }
      Percentage {
        Properties: Properties value;
      }
      100% {
        Properties: Properties value;
      }
    }

    animation和transition一样有自己相对应的属性，在animation主要有以下几种：

    • animation-iteration-count : 动画循环次数,默认为1，如果要进行无限循环，只要设为infinite即可

    • animation-direction : 动画播放的方向,其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放

    • animation-play-state : 播放状态。其主要有两个值，running和paused，其中running为默认值。可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放。这个属性不常用。

    三、Demo

    1.让图片不停旋转

    HTML

    1
    2
    3
    <body>
        <img src="img/ring.png">
    </body>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <style type="text/css">
        @keyframes rotateInfinite{
            from{
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to{
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes rotateInfinite{
            from{
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            to{
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        img{
            animation: rotateInfinite 1s linear infinite;
        }
    </style>
  • 相关阅读:
    Queue——C#浅谈
    C#设计模式(7)——适配器模式
    test
    python 技巧
    在centos 配置python django环境 总结
    pyqt5 做的小程序，可以用来UI做个小demo
    python sqlalthemy 总结
    数据清理，预处理 pandas dataframe 操作技巧 总结
    对区块链看法
    hadoop spark 总结
  • 原文地址：https://www.cnblogs.com/lijianming180/p/12326268.html
Copyright © 2011-2022 走看看