今天要分享一组代码，当鼠标悬停在按钮上时。按钮抖动！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>鼠标悬停在按钮上，按钮抖动</title>

</head>

<style>

       .lanren {

                 margin: 200px auto;

                 width: 300px;

                 text-align: center;

                 height: 40px;

                 line-height: 40px;

                 border: 1px solid #CCC;

                 border-radius: 2px;

                 background-color: skyblue;

        }

        .lanren:hover {

                         animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;

        }

         @keyframes shake {

                           10%, 90% {transform: translate3d(-1px, 0, 0);}

                           20%, 80% {transform: translate3d(2px, 0, 0);}

                           30%, 50%, 70% {transform: translate3d(-4px, 0, 0);}

                           40%, 60% {transform: translate3d(4px, 0, 0);}

 }

 </style>

<body>

    <div class="lanren">敢悬停在我上面，我就抖动！！</div>

</body>

</html>

效果图（静态截图）：

 

想要看具体的动图，那就动手敲起来吧，效果图很可爱滴呦！！！

CSS3动画之按钮抖动的更多相关文章

  1. [CSS3] 动画暗角按钮

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  3. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  4. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  6. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  7. 9款精美别致的CSS3菜单和按钮

    1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

  8. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  9. jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...

随机推荐

  1. MVC、MVP、MVVM模式的概念与区别

    1. MVC框架 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示 ...

  2. Java内存模型 （一）什么是进程？什么是线程？进程和线程之间的区别是什么？

    什么是进程?什么是线程? 进程是系统中正在运行的一个程序,程序一旦运行就是进程. 进程可以看成程序执行的一个实例.进程是系统资源分配的独立实体,每个进程都拥有独立的地址空间.一个进程无法访问另一个进程 ...

  3. HP UNIX弱口令

    这种弱口令直接丢进kali linu里用john --wordlist=zd.txt 加上文件

  4. 合并两个排序的链表递归和非递归C++实现

    题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,要求合成后的链表满足单调不减规则. 1.分析 已知输入的两个链表递增有序,要使输出的链表依然递增有序,可以依次从输入的两个链表中挑选最小的 ...

  5. 四则运算计算器的微信小程序_1 界面

    主界面wxml文件: page{ height:100%; } .content{ min-height:100%; display:flex; flex-direction:column; alig ...

  6. redis 学习（4）-- 哈希类型

    redis 学习(4)-- 哈希类型 介绍 redis 中哈希键值结构: 可以看出:哈希键值包括 key,field,value 这三部分,即键,属性,值这三部分.可以这样来表示: key, (fie ...

  7. C中的函数指针的用法

    include<stdio.h> typedef int (*Cal)(int a,int b);//定义一个函数指针,第一个int是指向函数的返回值的类型,后面括号里面的两个int是指指 ...

  8. Java版本及历史简述

    Java版本及历史简述 初学Java,对于Java那么多版本很困惑,这里做一点笔记,如有错误希望指出. Java由Sun公司创造,后Sun公司被Oracle公司收购,Java也随之变为Oracle的产 ...

  9. luogu P4365 [九省联考2018]秘密袭击coat

    luogu 这里不妨考虑每个点的贡献,即求出每个点在多少个联通块中为第\(k\)大的(这里权值相同的可以按任意顺序排大小),然后答案为所有点权值\(*\)上面求的东西之和 把比这个点大的点看成\(1\ ...

  10. 干货分享！Oracle 的入门到精通 ~

    Oracle Database,又名Oracle RDBMS,或简称Oracle.是甲骨文公司的一款关系数据库管理系统.它是在数据库领域一直处于领先地位的产品.可以说Oracle数据库系统是目前世界上 ...