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

<!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. appium环境搭建(二)----搭建android开发环境

    一.安装Java环境: java 环境分JDK 和JRE ,JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境. JRE ...

  2. poj3264（简单线段树）

    题目链接:https://vjudge.net/problem/POJ-3264 题意:线段树简单应用题,区间查询最大值和最小值的差. 思路:用线段树维护区间的最大值和最小值即可. AC代码: #in ...

  3. 浅谈Linux kill命令

    傻瓜常规篇: 首先,用ps查看进程,方法如下: $ ps -ef ……smx       1822     1  0 11:38 ?        00:00:49 gnome-terminalsmx ...

  4. 滚动页面产生动画WOW.js的用法

    简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...

  5. Java加密数据库

    一.背景 数据库配置以明文方式展示如图,会造成安全隐患,如果有黑客入侵会造成密码泄露,信息窃取和破坏等. 二.加密步骤 1.对数据库信息加密: 对数据库中的账号和密码信息进行加密(选择一种算法)然后替 ...

  6. python：map 函数

    map(func, *iterables) --> map object map()是 Python 内置的高阶函数,它接收一个函数 func 和一个 list(*iterables),并通过把 ...

  7. mysql中有条件的插入语句

    今天在参加笔试的过程中,看到一道题,大概意思就是说,当满足了条件就执行插入语句,当时就蒙了,之前从来都没有考虑过满足条件才插入的情况,所以一直都是这样写的 insert into table_name ...

  8. Zookeeper VS Chubby

    目录 区别的根源      1)一致性      2)Client Cache vs No Cache 总结 参考资料 区别的根源 一个设计良好的系统应该是围绕并为其设计目标服务的. Chubby:p ...

  9. NLP采用Bert进行简单文本情感分类

    参照当Bert遇上Kerashttps://spaces.ac.cn/archives/6736此示例准确率达到95.5%+ https://github.com/CyberZHG/keras-ber ...

  10. 关于获取某月某日最后一天时Calendar的cal.getActualMaximum(Calendar.DAY_OF_MONTH)的吐槽

    例如: 在2017.03.29-31号 新建一个Calendar的単例 设置年:2017 设置月:2 int day = cal.getActualMaximum(Calendar.DAY_OF_MO ...