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

<!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. (public丶private丶protected) 的理解

    public(公有):公有的类成员可以在任何地方被访问. protected(受保护):受保护的类成员则可以被其自身以及其子类和父类访问. private(私有):私有的类成员则只能被其定义所在的类访 ...

  2. MySQL数据库增删改查SQL语句（2018整理集合大全）

    查看数据库 show databases;  使用数据库 use 数据库名; 创建数据库 CREATE DATABASE 数据库名; 删除数据库 DROP DATABASE 数据库名; 创建表 cre ...

  3. linux下安装php的lua扩展

    1. 进入管理员权限使用yum安装 readline(也可以使用wget下载后./configure 然后 make && make install进行安装) yum install ...

  4. ElasticSearch工作原理与优化

    elasticsearch设计的理念就是分布式搜索引擎,底层其实还是基于lucene的,通过倒排索引的方式快速查询.比如一本书的目录是索引,然后快速找到每一章的的文本内容这种叫正向索引:而如果一件衣服 ...

  5. 预约系统（二） MVC框架搭建

    采用VS2013,自带的MVC4来搭建 MODEL层,表对象的建立: T_Bm.cs using System; using System.Collections.Generic; using Sys ...

  6. Auto-increment 自动增长

    Auto-increment 会在新记录插入表中时生成一个唯一的数字. AUTO INCREMENT 字段 我们通常希望在每次插入新记录时,自动地创建主键字段的值. 我们可以在表中创建一个 auto- ...

  7. centos配置mutt和msmtp发送邮件

    一.安装mutt yum install mutt -y 二.配置mutt vim /etc/Muttrc 在里面找到下面几行,并将内容修改为你自己的内容(下面几行分布在不同位置,请耐心查找,记得去掉 ...

  8. 第二章：排序算法 及其他 Java代码实现

    目录 第二章:排序算法 及其他 Java代码实现 插入排序 归并排序 选择排序算法 冒泡排序 查找算法 习题 2.3.7 第二章:排序算法 及其他 Java代码实现 --算法导论(Introducti ...

  9. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  10. SSM处理 No 'Access-Control-Allow-Origin' header is present on the requested resource 问题

    在开发中,前端同事调用后端同事写好的接口,在地址中是有效的,但在项目的ajax中,浏览器会报 "No 'Access-Control-Allow-Origin' header is pres ...