zoukankan      html  css  js  c++  java
  • css3 @keyframe 抖动/变色动画

    一.纯css实现

    .shake{    //抖动的元素
        200px;
        height: 100px;
        margin: 50px auto;
        background: #f00;
        position: relative;
    }


    /**step 2**/
    @-webkit-keyframes shake{
        0%{
            -webkit-transform:translateX(10px) rotate(10deg);
        }
        20%{
            -webkit-transform:translateX(-7px) rotate(-7deg);
        }
        40%{
             -webkit-transform:translateX(5px) rotate(6deg);
        }
        60%{
            -webkit-transform:translateX(-3px) rotate(-3deg);
        }
        80%{
            -webkit-transform:translateX(6px) rotate(5deg);
        }
       100%{
           -webkit-transform:translateX(-10px) rotate(-10deg);
        }
    }


    /**step 3**/
    .shake:hover{
        -webkit-animation-name: shake;
        -webkit-animation-duration: 0.25s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }

     

    二.js实现变色动画

    html:

    <div id='a' style="200px; height:200px; margin:0 auto;"></div>

    css:

    div.a {
        animation: myfirst 1s;
        -webkit-animation: myfirst 1s;
    }

    <style id="dynamic">
    </style>

    js:

    var colors = ['red','yellow','blue','green']


    window.setTimeout(function (){   //每隔一秒,取数组中的颜色值,作为div.a的背景动画颜色,再消除颜色动画(既消除背景色)
        var color = colors.shift();
        console.log(color);
        if (!color) return


        var style = document.getElementById("dynamic");   //给style页内标签加入keyframes动画


        style.innerHTML = '@-webkit-keyframes myfirst{50% {background: '+color+';} } '+ '@keyframes myfirst {50% {background: '+color+';}}'


        var a = document.getElementById('a')

        a.className = 'a'

        window.setTimeout(function(){
            a.className = ''
        },1000)


        window.setTimeout(arguments.callee,1500);

    },1000) 

  • 相关阅读:
    javascript运动详解
    jQuery Ajax封装通用类 (linjq)
    Bootstrap 字体图标引用示例
    jQuery $.each用法
    jquery中odd和even选择器的用法说明
    JQuery中怎么设置class
    HTML5中input背景提示文字(placeholder)的CSS美化
    边框上下左右各部位隐藏显示详解
    纯CSS气泡框实现方法探究
    对比Tornado和Twisted两种异步Python框架
  • 原文地址:https://www.cnblogs.com/jlliu/p/5319202.html
Copyright © 2011-2022 走看看