zoukankan      html  css  js  c++  java
  • js 动画

    普通

    .wise-loading {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
       70px;
      height: 70px;
      color: #3288ff;
      animation: wise-loading 0.6s linear 0s infinite alternate;
      /*          name        周期花费时间  开始时间  动画次数  轮流反向播放*/
    }
    @keyframes wise-loading {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    

    立方贝塞尔曲线

    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    

    ios 滚动回弹的效果的贝塞尔曲线的参数为 cubic-bezier(.17, .89, .45, 1)。

    1. name
    2. animation-duration 持续时间
    3. animation-timing-function 动画函数
    4. animation-delay 动画延迟多久开始
    5. times (animation-iteration-count) 循环次数 infinite:无限循环、number: 循环的次数
    6. animation-direction:normal:正常方向、reverse:反方向运行、alternate:动画先正常运行再反方向运行,并持续交替运行、alternate-reverse:动画先反运行再正方向运行,并持续交替运行
    7. animation-fill-mode 动画的最后(达到100%)时的状态,取值有:backward(回到初始状态)、forwards(停在最终状态)、none、both。
    8. animation-play-state animation-play-state:running | paused; running:运动、paused: 暂停、animation-play-state:paused;       当鼠标经过时动画停止,鼠标移开动画继续执行
  • 相关阅读:
    css3发光闪烁的效果
    移动端滚动加载数据实现
    JS生成一个简单的验证码
    百度地图在IOS中不显示
    vue开发神奇vue-devtools的安装
    gulp搭建服务
    webstorm中配置ES6语法
    centos 7 中防火墙的关闭问题
    centos命令
    Cesium加载影像
  • 原文地址:https://www.cnblogs.com/smzd/p/11888433.html
Copyright © 2011-2022 走看看