1、懸浮抖動
（1）效果演示
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IKKGoOoV-1572613830136)(CSS實戰筆記(四)] 抖動效果/horizontal_shake.gif)](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20191101211127976.gif)
（2）完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
.shape {
margin: 50px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.shake:hover {
animation: shake 800ms ease-in-out;
}
@keyframes shake { /* 水平抖動，核心代碼 */
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}
</style>
</head>
<body>
<div class="shape shake">horizontal shake</div>
</body>
</html>
2、點擊抖動
（1）效果演示
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gSBK0dbI-1572613830138)(CSS實戰筆記(四)] 抖動效果/vertical_shake.gif)](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/2019110121113735.gif)
（2）完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
.shape {
margin: 50px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake { /* 垂直抖動，核心代碼 */
10%, 90% { transform: translate3d(0, -1px, 0); }
20%, 80% { transform: translate3d(0, +2px, 0); }
30%, 70% { transform: translate3d(0, -4px, 0); }
40%, 60% { transform: translate3d(0, +4px, 0); }
50% { transform: translate3d(0, -4px, 0); }
}
</style>
<script>
function shake(elemId) {
let elem = document.getElementById(elemId)
if (elem) {
elem.classList.add('shake')
setTimeout(()=>{ elem.classList.remove('shake') }, 800)
}
}
</script>
</head>
<body>
<div class="shape" id="shake" onclick="shake(this.id)">vertical shake</div>
</body>
</html>
3、實戰
抖動效果在實際場景中有重要的應用，比如說當表單輸入錯誤時，讓錯誤的輸入框抖動以給用戶一個友好的提示
（1）效果演示
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GygTrHLb-1572613830139)(CSS實戰筆記(四)] 抖動效果/login_form.gif)](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/2019110121115343.gif)
（2）完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
.login-box {
width: 300px;
min-width: 300px;
height: 300px;
min-height: 300px;
background-color: white;
border: 1px solid black;
}
.title {
text-align: center;
color: cornflowerblue;
}
.form-item-wrap {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
.form-label {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
.form-input{
width: 80%;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
padding: 5px;
}
.form-submit {
display: block;
float: right;
margin-right: 20px;
color: cornflowerblue;
background-color: white;
text-shadow: 1px 1px 2px cornflowerblue;
border: none;
outline: none;
font-size: 20px;
font-weight: 500;
}
.form-submit:hover {
cursor: pointer;
font-size: 22px;
}
.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(+2px, 0, 0); }
30%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(+4px, 0, 0); }
50% { transform: translate3d(-4px, 0, 0); }
}
</style>
<script>
function shake(elemId) {
let elem = document.getElementById(elemId)
if (elem) {
elem.classList.add('shake')
setTimeout(()=>{ elem.classList.remove('shake') }, 800)
}
}
function check() {
// validate form data
if (login_form.username.value.length === 0) {
// the length of username must be greater than 0
shake('username')
return false
}
if (login_form.password.value.length < 6) {
// the length of password must be greater than 6
shake('password')
return false
}
return true
}
</script>
</head>
<body>
<div class="login-box">
<h3 class="title">Login</h3>
<form name="login_form" id="login_form" onsubmit="return check()">
<div class="form-item-wrap">
<label for="username" class="form-label">Username</label><br/>
<input type="text" name="username" id="username" class="form-input" placeholder="Please Enter Username">
</div>
<div class="form-item-wrap">
<label for="password" class="form-label">Password</label><br/>
<input type="password" name="password" id="password" class="form-input" placeholder="Please Enter Password">
</div>
<input type="submit" value="Submit" class="form-submit">
</form>
</div>
</body>
</html>
【 閱讀更多 CSS 系列文章，請看 CSS學習筆記 】