<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. jQuery深层次复制对象

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min. ...

  2. c/c++面试题(9)linux方向

    1.简述用虚函数实现的多态的原理: 编译器发现一个类中有虚函数的时候,便会立即为此类生成虚函数表vtable.虚函数表的各 表项为指向对应虚函数的指针.编译器还会在此类中隐含插入一个指针vptr(对v ...

  3. CDS

    very nice artical talk about mergechangelog and cleardataset Delta and Data http://www.cnblogs.com/y ...

  4. php绘图问题

    php绘图首先要确认gd库是否启用,到php.ini文件中,找到extension=php_gd2.dll将前面的:去掉,重新启动服务器. 如果在绘图中还是没有显示正常的图片,说明服务器在回复请求时, ...

  5. 对象序列化到本地文件 ObjectOutputstream ObjcetInputstream

    package com.main.test; import java.io.FileInputStream; import java.io.FileNotFoundException; import ...

  6. Android Studio2.2.2下RecyclerView的使用

    1,概述 RecyclerView可以完全代替ListView.GridView,整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同Layout ...

  7. 【C】二级指针探秘 & 星号的两种用法(1.与基本类型结合形成另一种类型,比如与int结合形成int* 2.取值操作)

    1)问题:二级指针到底是什么?怎么用的?怎么存放的? #include <stdio.h> #define TEST_ADDR 0x12FF40 void main() { int a = ...

  8. 【Learning Python】【第二章】Python基础类型和基础操作

    基础类型: 整型: py 3.0解决了整数溢出的问题,意味着整型不必考虑32位,64位,有无符号等问题,你写一个1亿亿亿,就是1亿亿亿,不会溢出 a = 10 ** 240 print(a) 执行以上 ...

  9. Linux内核启动过程start_kernel分析

    虽然题目是start_kernel分析,但是由于我在ubuntu环境下配置实验环境遇到了一些问题,我觉得有必要把这些问题及其解决办法写下来. 首先我使用的是Ubuntu14.04 amx64,以下的步 ...

  10. Azure Media Service

    该视频来源于Build 2015, 视频比较老, 从演讲的角度看, 是个非常不错的演讲, 内容也很全面. Apr 27, 2015