CSS 点击img 或者 div 增加抖动(shake)效果
一般使用场景: 登录的错误验证 或者 强提醒
template 部分
<img id="barcode" :class="{ shaking: toShake}" @click="handleShake" />
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)效果的更多相关文章
- TV端:通过遥控器的点击实现图片的上下左右抖动的效果
做TV端有一段时间了,我看到别的TV上有一个通过遥控器的触摸板来控制一张图片的相应方向的抖动,感觉听新奇的,就试着做了一个分享一下: 转载注明出处:http://www.cnblogs.com/hyy ...
- 点击其它地方DIV隐藏
$(document).bind('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.s ...
- Jquery点击除了指定div元素其他地方,隐藏该div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...
- 定时器应用-点击按钮,div向右移动
需求是点击button,div就一直往右移动,给个条件left=800px就停止移动,通过定时器来控制. 代码如下: <!DOCTYPE html> <html> <he ...
- vue踩坑之路--点击按钮改变div样式
有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...
- 锋利的Jquery(点击显示隐藏div)
点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 利用css如何让嵌套的div层不继承父div层的透明度?
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- div+css 怎么让一个小div在另一个大div里面 垂直居中
div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent { width:800 ...
- [转]JQuery控制div外点击隐藏,div内点击不会隐藏
一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...
随机推荐
- webStrom中配置nodejs
1.安装nodejs 下载地址:node.js:https://nodejs.org/download/ 按照提示安装即可 2.安装WebStrom 按照提示安装即可 下载地址:webstorm:ht ...
- cas-server-3.5.2-release.zip 及cas-client-3.2.1-release.zip下载
cas-client-3.2.1-release.zip===> https://github.com/apereo/cas/releases/download/v3.5.2/cas-serve ...
- 题解 P1484 种树
题目 传送门 cyrcyr今天在种树,他在一条直线上挖了 n 个坑. 这n个坑都可以种树,但为了保证每一棵树都有充足的养料,cyrcyr不会在相邻的两个坑中种树. 而且由于cyrcyr的树种不够,他至 ...
- P.SDA1.DEV - 一个没有服务器的图床
图床特色 P.SDA1.DEV的愿景是为大家提供一个免费.长期稳定外链分享图片的选择. P.SDA1.DEV的主要特点有: 完全建构在Serverless云服务上,致力于提供(墙外)可用性99.9%的 ...
- 题解 洛谷 P5303 【[GXOI/GZOI2019]逼死强迫症】
可以先去考虑没有\(1 \times 1\)的砖块的情况,对于最后一个位置只有两种情况,一个是竖着用一块砖铺设\(2 \times 1\),另一个为横着用两块砖铺设\(2 \times 2\). 设没 ...
- Docker 入门教程(1)——安装
docker大名听说了很久,一直没有去研究过,但现在面试动不动要求docker,还是研究下吧.由于我的电脑是win10系统(穷,买不起mac),安装过程各种坑爹问题不断,一度都想放弃,所以说垃圾win ...
- WebApiClientCore简约调用百度AI接口
WebApiClientCore WebApiClient.JIT/AOT的netcore版本,集高性能高可扩展性于一体的声明式http客户端库,特别适用于微服务的restful资源请求,也适用于各种 ...
- 可能会用的到的JQ插件
├─lib │ jquery jQuery类库(v1.9.1) │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-aw ...
- SpringBoot整合Mail发送邮件&发送模板邮件
整合mail发送邮件,其实就是通过代码来操作发送邮件的步骤,编辑收件人.邮件内容.邮件附件等等.通过邮件可以拓展出短信验证码.消息通知等业务. 一.pom文件引入依赖 <dependency&g ...
- python基础day5_元组
元祖---只读列表,可循环查询,可切片 儿子不能改,孙子可能可以改.增加(主要看要操作的是属于列表还是元组) tu = (1,2,3,'alex',[2,3,4,'taibai'],'egon') t ...