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

<!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. query函数的可查询数据

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func from sqlalche ...

  2. 为什么要学习Hive

    一 为什么要学习HIVE?   为什么不是ORACLE和MYSQL?   因为大数据时代 数据量成几何倍数增长,并且数据量非常庞大.大到要用PB EB这种量级去衡量.而我们的ORACLE/MYQL这种 ...

  3. Mysql8 root密码忘记了

    需要确定自己的mysql版本是否是8 [root@smonitor ~]# mysql --version mysql Ver 8.0.13 for Linux on x86_64 (MySQL Co ...

  4. springboot2整合zookeeper集成curator

    步骤: 1- pom.xml <dependency> <groupId>org.apache.curator</groupId> <artifactId&g ...

  5. 前端页面多级联动传输数据类型问题（数组or字符串）后端处理

    在最近的工作中,遇到一个问题,个人所做的简历模块中有两个字段,分别是个人信息中的户口所在地和现居住城市. 前端界面中这两个选项框是用到了二级和三级联动,在向后端传输时希望可以通过数组类型进行传输,例如 ...

  6. SQL数据库字段数据类型详细说明

    这里先总结数据类型.MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 日期和时间数据类型 MySQL数据类型 含义 date 3字节,日期,格式:20 ...

  7. 15 Python之内置函数

    思维导图: https://www.processon.com/mindmap/5c10cb5ee4b0090a2c9db92f 1. 匿名函数统一的名字是:<lambda> 使用场景: ...

  8. 第十八篇 JS传参数

    JS传参数   参数,这是个什么东西呢?简单的说吧,我们去玩别人的网站,一般来个登录,有用户名和密码,当我们输入正确之后,那么这用户名和密码里面的值,就是参数的值,它将这个值传给“参数”,然后提交到后 ...

  9. python 安装时，为何pip install不是内部或者外部命令错误解决办法

    新安装的python 环境,第一次pip  install 却报不是内部或者外部命令错误 首先检查一下环境变量,可能时你没有设置环境变量 再说一遍,安装python环境时,记得出了python.exe ...

  10. 10.1、LNMT架构

      Java环境安装包下载路径: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...