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实现如下: $(& ...
随机推荐
- OSCP Learning Notes - Buffer Overflows(4)
Finding the Right Module(mona) Mona Module Project website: https://github.com/corelan/mona 1. Downl ...
- STL Queue(队列)学习笔记 + 洛谷 P1540 机器翻译
队(Queue) 队简单来说就是一个先进先出的“栈”,但是不同于标准“栈”的先进后出. 基本操作: push(x) 将x压入队列的末端 pop() 弹出队列的第一个元素(队顶元素),注意此函数并不返回 ...
- 题解 洛谷 P4112 【[HEOI2015]最短不公共子串】
给定两个字符串\(A\)和\(B\),我们需要找出一个串,其在\(A\)中出现且不在\(B\)中出现,这个串为子串或者子序列,求在每种情况下,该串的最短长度. 考虑到后缀自动机可以识别一个字符串的所有 ...
- 用Python爬取双色球开奖信息,了解一下
1工具 2具体方法 1.使用python2.7编写爬取脚本 这里除了正常的爬取操作,还增加了独立的参数设定.如果没有参数,爬取的数据就在当前目录下:如果有参数,可以设定保存目录.保存文件名后缀 ...
- java计算下一个整5分钟时间点
需求背景 我的需求是获取当前时间之后的下一个"整5分钟时间点". 首先,那么何为"整5分钟时间点"? 满足以下两个条件的时间: 分钟数等于以下时间中的一个,且秒 ...
- Flutter.. 两个点语法含义
在Flutter编程中,会经常用到".."的语法糖,如下 state.clone() ..splashImg = action.img ..famousSentence = act ...
- MySQL 8.0.20 安装教程图文详解(windows 64位)
MySQL 8.0.20 安装教程图文详解(windows 64位) 更新时间:2020年05月09日 15:09:04 转载 作者:瘦肉粥不加糖 这篇文章主要介绍了MySQL 8.0. ...
- this指向面试题两则
面试题1 let len = 10; function fn() { console.info(this.len) } fn(); // A let Person = { len: 5, say: f ...
- 使用@ControllerAdvice处理异常
在Spring 3.2中,新增了@ControllerAdvice.@RestControllerAdvice 注解,可以用于定义@ExceptionHandler.@InitBinder.@Mode ...
- 字典内置函数&方法
字典内置函数&方法 Python字典包含了以下内置函数:高佣联盟 www.cgewang.com 序号 函数及描述 1 cmp(dict1, dict2)比较两个字典元素. 2 len(dic ...