<li onmouseout="this.className='off'"><a href=""><img src="../活力广州_files/admin.png" alt=""></a></li>

.off{
-webkit-animation:1s seconddiv;
background: transparent;
}

@keyframes seconddiv{
0% {transform: scale(1.4,1.4);}
10% {transform: scale(1,1);}
25% {transform: scale(1.2,1.2);}
50% {transform: scale(1,1);}
70% {transform: scale(1.2,1.2);}
100% {transform: scale(1,1);}
}

先设置onmouseout(鼠标移出)的函数

onmouseout="this.className='off'"

设置off的函数,函数为css3动画的弹跳,或者抖动

再设置keyframes的函数动画

这样就可以不用js做出一个抖动的效果啦

如何用css3实现一个图片的抖动或者弹跳的更多相关文章

  1. 如何用css3实现风车效果

    前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...

  2. 【C++自绘控件】如何用GDI+来显示图片

    在我们制作一个应用软件的时候往往需要在窗口或控件中添加背景图.而图片不仅有BMP格式的,还有JPEG.PNG.TIFF.GIF等其它的格式.那么如何用jpg格式的图片来当背景呢? 这里用到了GDI+, ...

  3. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  4. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  5. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  6. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  7. 纯CSS3实现的图片滑块程序 效果非常酷

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  8. 怎样使用纯CSS3创建一个简单的五角星图形

    我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五 ...

  9. 如何用Python判断一个文件是否被占用?

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 今天有同学问,用os模块的access()能否判断一个文件是否被占用?直觉上,这是行不通的,因为ac ...

随机推荐

  1. xcode中得一个坑

    因项目需求变动,我必须在coredata中的WorkLogModel表中添加一个字段:抄送人.起初我给这个字段起名为copyPerson,一切准备就绪后,发现从数据库读取这个copyPerson时,第 ...

  2. Linux 终端常用快捷键

    Tab 自动补全 Ctrl+L 清屏 Ctrl+A 移动到头 Ctrl+E 移动到尾 Ctrl+左键头 左移一个单词 Ctrl+右箭头 右移一个单词 Ctrl+U 删除左边所有字符 Ctrl+K 删除 ...

  3. c++ 中的sort用法

    别人写的,我拿来做做笔记 sort函数的用法 做ACM题的时候,排序是一种经常要用到的操作.如果每次都自己写个冒泡之类的O(n^2)排序,不但程序容易超时,而且浪费宝贵的比赛时间,还很有可能写错.ST ...

  4. display:inline-block 和float:left 的区别

    display:inline-block 和float:left 的区别   display是指显示状态,float是针对块级元素的浮动. 使用inline-block:控制元素的垂直对齐跟横向排列元 ...

  5. EasyUI使用JSON保存数据

    目前来说,使用JSON保存数据比较方便,前台可以不用Test.aspx 页面,可以直接用Html页面,使用.aspx页面的弊端就不在这里熬述. 具体步骤如下: 1.新建一个Html页面,命名为Test ...

  6. JQ源码学习-1-无new构建

    此文章仅为个人学习 Aaron的jQuery源码分析 笔记之用. 一:采用 构造函数 返回 原型初始化方法,原型初始化方法又返回构造函数 的方式代替new 但当 返回的却是‘web’而不是Object ...

  7. C语言程序设计第十一次作业

    同学们,一晃一个学期就过去了,第一节课时,我曾做过一个调查,没有一个同学在中学阶段接触过程序设计,也就是说,那时,大家都是零基础,或许只是听说过"C语言"这个词,但其他便一无所知了 ...

  8. 设置Ubuntu为本地时间

    大家在切换操作系统的时候会发现一个问题, Windows 和 Ubuntu 的时间会出现不一致的情况.在 Windows 中把时间设置正确了过后,回到在 Ubuntu 后系统的时间又不一样了,在 Ub ...

  9. 六大免费网站数据采集器对比(火车头,海纳,云采集,ET,三人行,狂人采集)

    2013年02月27日 PHP开源系统 暂无评论 阅读 497 views 次 在目前的站长圈内,比较流行的采集工具有很多,但是总结起来,比较出名的免费的就这么几个:火车头,海纳,云采集,ET,三人行 ...

  10. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...