一般使用场景: 登录的错误验证 或者 强提醒

template 部分

  1. <img id="barcode" :class="{ shaking: toShake}" @click="handleShake" />

javascript 部分

  1. export default {
  2. data(){
  3. return{
  4. toShake: false
  5. }
  6. },
  7. methods:{
  8. handleShake() {
  9. this.toShake= true
  10. // demo for next animation.
  11. setTimeout(() => {
  12. this.toShake= false
  13. }, 1000)
  14. }
  15. }
  16. }

css 部分

  1. .shaking {
  2. animation: shakeX 1s;
  3. }
  4. @keyframes shakeX {
  5. from,
  6. to {
  7. transform: translate3d(0, 0, 0);
  8. }
  9. // 进度为10%,30%,50%,70%,90% 动画
  10. 10%,
  11. 30%,
  12. 50%,
  13. 70%,
  14. 90% {
  15. transform: translate3d(-0.5rem, 0, 0);
  16. }
  17. // 进度为10%,30%,50%,70%,90% 动画
  18. 20%,
  19. 40%,
  20. 60%,
  21. 80% {
  22. transform: translate3d(0.5rem, 0, 0);
  23. }
  24. }

CSS 点击img 或者 div 增加抖动(shake)效果的更多相关文章

  1. TV端:通过遥控器的点击实现图片的上下左右抖动的效果

    做TV端有一段时间了,我看到别的TV上有一个通过遥控器的触摸板来控制一张图片的相应方向的抖动,感觉听新奇的,就试着做了一个分享一下: 转载注明出处:http://www.cnblogs.com/hyy ...

  2. 点击其它地方DIV隐藏

    $(document).bind('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.s ...

  3. Jquery点击除了指定div元素其他地方,隐藏该div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script ty ...

  4. 定时器应用-点击按钮,div向右移动

    需求是点击button,div就一直往右移动,给个条件left=800px就停止移动,通过定时器来控制. 代码如下: <!DOCTYPE html> <html> <he ...

  5. vue踩坑之路--点击按钮改变div样式

    有时候,我们在做项目的时候,想通过某个按钮来改变某个div样式,那么可以通过以下代码实现: <!DOCTYPE html> <html> <head> <me ...

  6. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. 利用css如何让嵌套的div层不继承父div层的透明度?

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  8. 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 ...

  9. [转]JQuery控制div外点击隐藏,div内点击不会隐藏

    一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...

随机推荐

  1. webStrom中配置nodejs

    1.安装nodejs 下载地址:node.js:https://nodejs.org/download/ 按照提示安装即可 2.安装WebStrom 按照提示安装即可 下载地址:webstorm:ht ...

  2. 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 ...

  3. 题解 P1484 种树

    题目 传送门 cyrcyr今天在种树,他在一条直线上挖了 n 个坑. 这n个坑都可以种树,但为了保证每一棵树都有充足的养料,cyrcyr不会在相邻的两个坑中种树. 而且由于cyrcyr的树种不够,他至 ...

  4. P.SDA1.DEV - 一个没有服务器的图床

    图床特色 P.SDA1.DEV的愿景是为大家提供一个免费.长期稳定外链分享图片的选择. P.SDA1.DEV的主要特点有: 完全建构在Serverless云服务上,致力于提供(墙外)可用性99.9%的 ...

  5. 题解 洛谷 P5303 【[GXOI/GZOI2019]逼死强迫症】

    可以先去考虑没有\(1 \times 1\)的砖块的情况,对于最后一个位置只有两种情况,一个是竖着用一块砖铺设\(2 \times 1\),另一个为横着用两块砖铺设\(2 \times 2\). 设没 ...

  6. Docker 入门教程(1)——安装

    docker大名听说了很久,一直没有去研究过,但现在面试动不动要求docker,还是研究下吧.由于我的电脑是win10系统(穷,买不起mac),安装过程各种坑爹问题不断,一度都想放弃,所以说垃圾win ...

  7. WebApiClientCore简约调用百度AI接口

    WebApiClientCore WebApiClient.JIT/AOT的netcore版本,集高性能高可扩展性于一体的声明式http客户端库,特别适用于微服务的restful资源请求,也适用于各种 ...

  8. 可能会用的到的JQ插件

    ├─lib │ jquery jQuery类库(v1.9.1) │ bootstrapSwitch 开关控件 │ Hui-iconfont_v1.0 阿里图标字体库(H-ui定制) │ font-aw ...

  9. SpringBoot整合Mail发送邮件&发送模板邮件

    整合mail发送邮件,其实就是通过代码来操作发送邮件的步骤,编辑收件人.邮件内容.邮件附件等等.通过邮件可以拓展出短信验证码.消息通知等业务. 一.pom文件引入依赖 <dependency&g ...

  10. python基础day5_元组

    元祖---只读列表,可循环查询,可切片 儿子不能改,孙子可能可以改.增加(主要看要操作的是属于列表还是元组) tu = (1,2,3,'alex',[2,3,4,'taibai'],'egon') t ...