CSS 点击img 或者 div 增加抖动(shake)效果
2021-01-17 20:15
标签：ima 部分 translate sha method exp hand code time CSS 点击img 或者 div 增加抖动(shake)效果 标签：ima 部分 translate sha method exp hand code time 原文地址：https://www.cnblogs.com/leslie1943/p/13358152.html一般使用场景: 登录的错误验证 或者 强提醒
template 部分
javascript 部分
export default {
data(){
return{
toShake: false
}
},
methods:{
handleShake() {
this.toShake= true
// demo for next animation.
setTimeout(() => {
this.toShake= false
}, 1000)
}
}
}
css 部分
.shaking {
animation: shakeX 1s;
}
@keyframes shakeX {
from,
to {
transform: translate3d(0, 0, 0);
}
// 进度为10%,30%,50%,70%,90% 动画
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-0.5rem, 0, 0);
}
// 进度为10%,30%,50%,70%,90% 动画
20%,
40%,
60%,
80% {
transform: translate3d(0.5rem, 0, 0);
}
}
文章标题：CSS 点击img 或者 div 增加抖动(shake)效果
文章链接：http://soscw.com/index.php/essay/43349.html