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

    使用动画让元素动起来:

    CSS动画源码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="gbk" />
        <title>test</title>
        <style>
            .animated {
              animation-duration: 1s; /*动画时间*/
              animation-iteration-count: infinite; /*动作循环的次数:infinite 无限循环*/
              animation-fill-mode: both; /*播放后的状态,none=不改变默认行为;forwards=保持最后一个属性值(在最后一个关键帧中定义);backwards=animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义);both    向前和向后填充模式都被应用。*/          
            }
            .animated-up{
                animation-name:keyframes-move-up; /*动画的名称*/
            }
            .animated-right{
                animation-name:keyframes-move-right; /*动画的名称*/
            }
            .box {
              background: rgba(45,151,219,.8);
              padding: 5px;
              color: white;
              text-align: center;
              margin:5px;
            }
            .box:hover{
              animation-play-state:paused;/*停止晃动*/
              -webkit-animation-play-state:paused;
              cursor: pointer;
            }     
            /**上下晃动动画**/
            @keyframes keyframes-move-up{
              0%,
              100%,
              20%,
              50%,
              80% {
                transform: translate3d(0,0,0); 
              }
              40%{
                transform: translate3d(0,-8px,0);
              }
              70%{
                transform: translate3d(0,-6px,0);
              }
              90%{
                transform: translate3d(0,-4px,0);
              }
            }
            /**左右晃动动画**/
            @keyframes keyframes-move-right{
              0%,
              100%,
              20%,
              50%,
              80% {
                transform: translate3d(0,0,0); 
              }
              40%{
                transform: translate3d(8px,0,0);
              }
              70%{
                transform: translate3d(6px,0,0);
              }
              90%{
                transform: translate3d(4px,0,0);
              }
            }
        </style>
    </head>
    <body >
        <div class="box animated animated-up">上下晃动</div>
        <div class="box animated animated-right">左右晃动</div>
    </body>
    </html>
  • 相关阅读:
    javascript --学习this
    seaJS
    wamp之htaccess的配置
    replace之$1、$2等
    nw.js使用
    新电脑开发环境配置
    vue-vue常用指令
    Array的splice与slice
    vue-入门体验
    Object.defineProperty
  • 原文地址:https://www.cnblogs.com/xmqa/p/8674747.html
Copyright © 2011-2022 走看看