zoukankan      html  css  js  c++  java
  • css3动画特效:上下晃动的div

    css3动画特效:上下晃动的div

    <div id="square" class="container animated">上下晃动</div>
     
     
     
    /**
     * transform-origin 设置旋转元素的基点位置
     * animation-name 设置动画名称
     * animation-duration 设置动画时间
     * animation-fill-mode 设置播放后的状态
     * animation-iteration-count 设置循环播放的次数
     * transition-timing-function: cubic-bezier 贝塞尔曲线效果,它有四个值,指在X轴与Y轴的两个曲线的点,第一个点:X1 Y1;第二个点:X2 Y2
     * transform: translate3d 设置动画Z轴位移几个元素,表示只在Z轴上移动
     *
     * 需要注意:transform: translate3d 不等于 transform: translateZ
     */
     
    .animated {
      animation-duration: 1s; /*动画时间*/
      animation-fill-mode: both; /*播放后的状态*/
    }
     
    .animated {
      animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
    }
     
    .animated {
      animation-duration: 2s; /*动画时间*/
    }
     
    .container {
      background: #2D97DB;
      width: 90%;
      height: 90%;
      padding: 100px;
      margin: 20px auto;
      font-family: "微软雅黑";
      font-size: 40px;
      color: white;
      text-align: center;
      line-height: 90%;
    }
     
    .container:hover{
      animation-name:container; /*动画的名称*/
      transform-origin: center bottom; /*设置动画旋转元素的基点为:居中靠下*/
      cursor: pointer;
    }
     
    @keyframes container{
      0%,
      100%,
      20%,
      50%,
      80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 : X1 Y1 X2 Y2*/
      transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
      }
      40%,
      43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(0,-30px,0);
      }
      70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(0,-15px,0);
      }
      90%{
      transform: translate3d(0,-4px,0);
      }
    }
  • 相关阅读:
    百度mp3地址解密码
    VB 在EXE后附加信息
    截屏函数
    Base64和StrToByte
    The Android ION memory allocator, DMABUF is mentioned as well
    DDC EDID 介绍
    Memory management for graphic processors TTM的由来
    科普 写display driver的必看 How video card works [2D的四种主要操作]
    GEM vs TTM
    DMABUF 背景介绍文章 Sharing buffers between devices
  • 原文地址:https://www.cnblogs.com/zhangxiaopeng/p/6247314.html
Copyright © 2011-2022 走看看