<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. 整合了一个功能强大完善的OA系统源码,php全开源 界面漂亮美观

    整合了一个功能强大完善的OA系统源码,php全开源界面漂亮美观.需要的同学联系Q:930948049

  2. jbox用法

    详见  http://www.jjsp.gov.cn:8888/js/jbox-v2.3/jbox-demo2.html

  3. php+js实现分页

    使用onclick传递参数时,参数为空分页无效.因此无刷新页面时可利用js重新获取input的值同样通过get地址传递到分页显示的php页面.page参数接收和传递方式必须一致为post或get. j ...

  4. 使用Excel 2007绘制甘特图

    本文将教大家如何使用Excel 2007制作甘特图.Excel并未提供甘特图类型,但还是可以绘制甘特图的,方法就是通过对堆积条形图类型进行自定义,使之显示任务.任务工期和层次结构. 下面的过程可帮助创 ...

  5. 在Eclipse中对自动封装的设定颜色

    在Eclipse中,对自动封装进行特别着色提醒的方法:windows-->Preference-->java-->Editor-->Syntax Coloring-->j ...

  6. 画图程序升级版Draw_v1

    // https://github.com/orocos/orocos_kinematics_dynamics/blob/master/orocos_kdl/src/frames.hpp // Vec ...

  7. DataGridview 自动切换到 下一行

    if (m_dgvList.SelectedRows.Count > 0) { int intCurrApp = m_dgvList.SelectedRows[0].Index; if (int ...

  8. Protobuf C#教程 ThriftC#教程大合辑

    android与PC,C#与Java 利用protobuf 进行无障碍通讯[Socket] http://www.cnblogs.com/TerryBlog/archive/2011/04/23/20 ...

  9. iOS 微信分享

    1.注册微信开放平台账号:https://open.weixin.qq.com 2.创建应用 设置图片可以使用一个小工具,详情http://www.cnblogs.com/czq1989/p/5073 ...

  10. android 数据下载 工具类

    传入图片地址,获得服务器返回的流. 把流转化为byte[]数组