如何用css3实现一个图片的抖动或者弹跳
<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实现一个图片的抖动或者弹跳的更多相关文章
- 如何用css3实现风车效果
前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...
- 【C++自绘控件】如何用GDI+来显示图片
在我们制作一个应用软件的时候往往需要在窗口或控件中添加背景图.而图片不仅有BMP格式的,还有JPEG.PNG.TIFF.GIF等其它的格式.那么如何用jpg格式的图片来当背景呢? 这里用到了GDI+, ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
- 纯CSS3实现的图片滑块程序 效果非常酷
原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...
- 怎样使用纯CSS3创建一个简单的五角星图形
我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五 ...
- 如何用Python判断一个文件是否被占用?
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 今天有同学问,用os模块的access()能否判断一个文件是否被占用?直觉上,这是行不通的,因为ac ...
随机推荐
- EF实体框架数据操作接口(转)
//----------------------------------------------------------------// Copyright (C) 2013 河南禄恒软件科技有限公司 ...
- SQLserver技巧
(1) SQL标记 连接连个表然后用 DATA COMPAREDATA进行区分select 'DATA ' ,'列名1','列名2','列名3' from 表 union select 'COM ...
- Android系统文件夹组织结构
- freeCAD下载与安装
官方安装: freeCAD稳定版 freeCAD官方提供了几个稳定版本供开发者使用: Windows (XP, Vista and 7, 32 and 64bits), Mac OS X (Lion ...
- 用profile分析算法性能
在命令行输入:profile viewer 会出现如下图所示探查器: 在运行此代码的后面的输入框中输入要运行的程序,然后点击启动探查,就会自动探查. 探查结束之后,会给出每个函数的调用次数.运行时间等 ...
- iOS学习之block
Block是C语言的扩充功能.带有自动变量(局部变量)的匿名函数.(不带有名称的函数) 非匿名函数:int func(int count):(声明了名称为func的函数)使用:int result = ...
- final修饰的变量是引用不能改变,还是引用的对象不能改变???
对于这个问题,我们不能只记结论,要拿实例说话,参看以下代码: public class Demo { public static void main(String[] args) { final St ...
- android 定时任务
使用timertask进行定时任务 首先创建TimerTask: class SynchroTimerTask extends TimerTask { @Override public void ru ...
- Spring的依赖注入怎么理解
先看一段代码假设你编写了两个类,一个是人(Person),一个是手机(Mobile). 人有时候需要用手机打电话,需要用到手机的dialUp方法. 传统的写法是这样: Java code public ...
- 库函数API和C语言汇编语言混合式编程
C语言代码内嵌汇编的方法: 在C语言文件中以如下格式加入汇编代码 __asm__( “汇编语句模板” :输出部分 :输入部分 :“破坏描述部分” ) asm可以由__asm__代替,为其别名. 可加上 ...