用CSS3+jQuery实现点击按钮元素摇摆特效

作者：abc1232017.08.07来源：Web前端之家浏览：11162评论:0

关键词：CSS3 JQ

点击按钮元素摇摆特效，这个是使用CSS3+jQuery搞定的，在项目中很实用的哟。

<!DOCTYPE html>
<html> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>用CSS3+jQuery实现点击按钮元素摇摆特效 - Web前端之家</title>  
<script type="text/javascript" src="/demo/js/jq.js"></script>  
<script type="text/javascript">  
$(function(){  
    $("#button1").click(function(){  
        $("#btn").removeClass().addClass("shake");  
        var set = setTimeout(function(){  
            $("#btn").removeClass();      
        },1500)  
    })  
    $("#button2").click(function(){  
        $("#btn").removeClass().addClass("shake2");  
        var set = setTimeout(function(){  
            $("#btn").removeClass();      
        },1500)  
    })  
})  
</script>  
<style type="text/css">  
li{border:1px solid #333;} 

 @-webkit-keyframes shake{        
    0%, 100% {-webkit-transform: rotate(0);}  
    10%, 30%, 50%, 70%, 90% {-webkit-transform:rotate(-15deg);}  
    20%, 40%, 60%, 80% {-webkit-transform:rotate(15deg)}  
}  
@-moz-keyframes shake{  
    0%, 100% {-moz-transform: rotate(0);}  
    10%, 30%, 50%, 70%, 90% {-moz-transform: rotate(-15deg);}  
    20%, 40%, 60%, 80% {-moz-transform: rotate(15deg);}  
}   
  
 @-webkit-keyframes shake2 {  
  
    0%, 100% {-webkit-transform: translateX(0);}  
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}  
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}  
}  
@-moz-keyframes shake2 {  
    0%, 100% {-moz-transform: translateX(0);}  
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}  
    20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}  
}  
  
  
  
a.shake{  
    -webkit-animation-name:shake;  
    -webkit-animation-duration:1s;  
    -moz-animation-duration:1s;  
    }  
a.shake2{  
    -webkit-animation-name:shake2;  
    -webkit-animation-duration:1s;  
    -moz-animation-duration:1s;  
    }  
  
a#btn{  
   margin:0 auto;
   display:block;
    padding:10px 0;  
    width:100%;  
    height:50px;  
    line-height:50px;  
    background:rgba(0,102,255,1);  
    -webkit-box-shadow:1px 1px 4px rgba(102,102,102,1);  
    -moz-box-shadow:1px 1px 4px rgba(153,153,153,1);  
    text-align:center;  
    font-weight:bold;  
    -webkit-text-shadow:2px 2px 1px rgba(51,51,51,1);  
    -moz-text-shadow:2px 2px 1px rgba(51,51,51,1);  
    text-shadow:2px 2px 1px rgba(51,51,51,1);  
    color:#FFFFFF;  
    text-decoration:none;  
    border-radius:5px;  
    }  
.btnbox{width:200px;margin:40px auto;text-align:center}
.btnbox button{display:inline-block;margin-top:20px;width:80px;line-height:80px;background:#f00;color:#fff;border:none;}
  
</style>  
</head>  
  
<body>  
<div class="btnbox">
    <a href="javascript://" id="btn" class="">让我摇摆</a>  
    <button id="button1">点击我1</button>
    <button id="button2">点击我2</button>
</div>
</body>  
</html>

赏您的支持是我们创作的动力！