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

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. OSCP Learning Notes - Buffer Overflows(4)

    Finding the Right Module(mona) Mona Module Project website: https://github.com/corelan/mona 1. Downl ...

  2. STL Queue(队列)学习笔记 + 洛谷 P1540 机器翻译

    队(Queue) 队简单来说就是一个先进先出的“栈”,但是不同于标准“栈”的先进后出. 基本操作: push(x) 将x压入队列的末端 pop() 弹出队列的第一个元素(队顶元素),注意此函数并不返回 ...

  3. 题解 洛谷 P4112 【[HEOI2015]最短不公共子串】

    给定两个字符串\(A\)和\(B\),我们需要找出一个串,其在\(A\)中出现且不在\(B\)中出现,这个串为子串或者子序列,求在每种情况下,该串的最短长度. 考虑到后缀自动机可以识别一个字符串的所有 ...

  4. 用Python爬取双色球开奖信息,了解一下

    1工具     2具体方法 1.使用python2.7编写爬取脚本 这里除了正常的爬取操作,还增加了独立的参数设定.如果没有参数,爬取的数据就在当前目录下:如果有参数,可以设定保存目录.保存文件名后缀 ...

  5. java计算下一个整5分钟时间点

    需求背景 我的需求是获取当前时间之后的下一个"整5分钟时间点". 首先,那么何为"整5分钟时间点"? 满足以下两个条件的时间: 分钟数等于以下时间中的一个,且秒 ...

  6. Flutter.. 两个点语法含义

    在Flutter编程中,会经常用到".."的语法糖,如下 state.clone() ..splashImg = action.img ..famousSentence = act ...

  7. MySQL 8.0.20 安装教程图文详解(windows 64位)

    MySQL 8.0.20 安装教程图文详解(windows 64位)  更新时间:2020年05月09日 15:09:04   转载 作者:瘦肉粥不加糖     这篇文章主要介绍了MySQL 8.0. ...

  8. this指向面试题两则

    面试题1 let len = 10; function fn() { console.info(this.len) } fn(); // A let Person = { len: 5, say: f ...

  9. 使用@ControllerAdvice处理异常

    在Spring 3.2中,新增了@ControllerAdvice.@RestControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@Mode ...

  10. 字典内置函数&方法

    字典内置函数&方法 Python字典包含了以下内置函数:高佣联盟 www.cgewang.com 序号 函数及描述 1 cmp(dict1, dict2)比较两个字典元素. 2 len(dic ...