CSS实战笔记(四) 抖动效果
1、悬浮抖动
（1）效果演示
（2）完整代码
<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 shakediv>
body>
html>
2、点击抖动
（1）效果演示
（2）完整代码
<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 shakediv>
body>
html>
3、实战
抖动效果在实际场景中有重要的应用，比如说当表单输入错误时，让错误的输入框抖动以给用户一个友好的提示
（1）效果演示
（2）完整代码
<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">Loginh3>
<form name="login_form" id="login_form" onsubmit="return check()">
<div class="form-item-wrap">
<label for="username" class="form-label">Usernamelabel><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">Passwordlabel><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>