css抖动基础

浏览数：33 / 时间：2015年06月09日


<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <tilte>Document</title>
        <style>
        @-webkit-keyframes buzz-out{
            0%{
                -webkit-transform:translateX(10px)rotate(20deg);
            }
            30%{
                -webkit-transform:tranalateX(-10px)rotate(-20deg);


            }
            60%{
                -webkit-transform:translateX(30px)rotate(50deg);
            }
            100%{
                 -webkit-transform:translateX(-30px)rotate(-50deg);
            }
        }
        #buzz{
            width:1000px;
            height:400px;
            margin:200px;
            background:#eee1e1;
            position:relative;
        }
        #buzz:hover {
            -webkit-animation-name:buzz-out;
            -webkit-animation-duration:1s;
            -webkit-animation-timing-function:linear;
            -webkit-animation-iteration-count:100;
        }


        </style>
</head>
<body>
    <div id="buzz">
        <p></p>
    </div>  
</body>

</html>

技术分享

以上是代码。

有关属性：animation

animation-name:规定需要绑定到选择器keyframe名称

animation-duration:规定花费的时间以秒或毫秒记

animation-timing-fuction:规定动画速度曲线

animation-delay:规定开始之前的延迟

animation-iteration-count:规定动画应播放的次数

animation-direction:规定是否应该轮流反向播放动画

 @-webkit-keyframes buzz-out{
            0%{
                -webkit-transform:translateX(10px)rotate(20deg);
            }
            30%{
                -webkit-transform:tranalateX(-10px)rotate(-20deg);


            }
            60%{
                -webkit-transform:translateX(30px)rotate(50deg);
            }
            100%{
                 -webkit-transform:translateX(-30px)rotate(-50deg);
            }
        }

这里可以设置抖动的幅度

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： csscss

相关文章

随机文章

您可能还喜欢

您可能还喜欢