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

<!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. 【C】命令行参数解析——getopt、getopt_long及getopt_long_only

    前言 在linux下学习开源代码Webbench,遇到get_long等函数的用法,一时有点懵,故想深入了解这类命令行解析函数,并记此博文. 1.getopt getopt主要用来处理短命令行选项,例 ...

  2. 搞懂MySQL GTID原理

    从MySQL 5.6.5 开始新增了一种基于 GTID 的复制方式.通过 GTID 保证了每个在主库上提交的事务在集群中有一个唯一的ID.这种方式强化了数据库的主备一致性,故障恢复以及容错能力. GT ...

  3. MHA搭建

    https://metacpan.org 下载perl依赖包的网站 ##################上传安装依赖包#################### mkdir /opt/soft_file ...

  4. java-selenium浏览器常用操作命令

    一.浏览器操作命令 启动火狐浏览器(49版本以下) System.setProperty("webdriver.firefox.bin","D:\\Firefox\\fi ...

  5. php 如何生成path及其日常维护

    php 如何生成path及其日常维护 path字段重要性不言而喻,在查询的时候,如果只用pid,查询效率会很低,增加path,查询效率大大提高,最起码不用递归查库了,重点是维护推荐关系的时候要维护pa ...

  6. 版本控制器之SVN（一）

    通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易引发BUG 难于追溯问题代码的修改人和修改时间 难 ...

  7. pip 更新命令

    更新pip的命令  https://pip.pypa.io/

  8. .Net高并发解决思路

    转自: 本文如有不对之处,欢迎各位拍砖扶正.另源码在文章最下面,大家下载过后先还原一下nuget包,需要改一下redis的配置,rabbitmq的配置以及Ef的连接字符串.另外使用的是CodeFirs ...

  9. JS基础_强制类型转换-Boolean

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

  10. JS基础_js编写位置

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