点击预览效果            下载该特效： HTML5+CSS3鼠标悬停图片特效.zip

特效说明：

一款HTML5+CSS3鼠标悬停图片事件网页特效，集合了最流行鼠标悬停图片文字、图片动画移动、渐隐渐显动画特效。

请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）

使用方法：
1、调用CSS样式：
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />

2、必要样式：
<link rel="stylesheet" type="text/css" href="css/set1.css" />

3、添加HTML代码：
将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码；放在<body></body>之间。

HTML5+CSS3鼠标悬停图片特效的更多相关文章

  1. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  2. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  4. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

  5. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

  6. css3鼠标悬停图片渐显飞入效果

    body程序: <div id="bei"> <div id="img"><img src="xianzi.png&qu ...

  7. css3 鼠标悬停图片动画

    <div class="grid"> <figure class="effect-milo"> <img src="im ...

  8. css3鼠标悬停图片抖动效果

    提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/

  9. HTML5/CSS3鼠标悬停动画菜单按钮

    在线演示 本地下载

随机推荐

  1. HTTP请求类型详解

    HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务 器)请 ...

  2. Java strictfp关键字

    保证浮点运算的结果不受平台的影响,在任何平台上,使用统一的标准进行浮点运算,提高程序的可移植性(毕竟结果更可控,更精确),相应的,以降低性能为代价 Strictfp ensures that you ...

  3. 如何理解 Redux？

    作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136 来源:知乎 著作权归作者所有,转载请联系作者获得授 ...

  4. SQL Server 2008 TOP 新用途

    /***************创建测试表******************************/ IF NOT OBJECT_ID('[Demo_Top]') IS NULL DROP TAB ...

  5. RabbitMQ 原文译06--Remote procedure call(RPC)

    在第三篇文章中, 我们学习了怎么使用队列在多了消息消费者当中进行耗时任务轮询. 但是如果我们想要在远程电脑上运行一个方法,然后等待其执行结果,这就是一个不同的场景,这种就是我们一般讲的RPC(远程过程 ...

  6. Android中去掉标题栏的3种方法

    1.在java代码中 (SplashActivity继承AppCompatActivity时无效)

  7. 广告系统中weak-and算法原理及编码验证

    wand(weak and)算法基本思路 一般搜索的query比较短,但如果query比较长,如是一段文本,需要搜索相似的文本,这时候一般就需要wand算法,该算法在广告系统中有比较成熟的应 该,主要 ...

  8. node.js 小爬虫 imooc 2016.03.06

    爬虫目标:获取http://www.imooc.com/learn/348网页中的章节标题和视频信息. var http = require('http'); var cheerio = requir ...

  9. Library vector Type

    vector的定义 vector是C++标准库里最常用的容器,它之所以被称为容器,是因为它可以存放多个对象,所有在用一个容器中的对象都应该具有相同的类型. vector也是一个类模板,这也是它能存放多 ...

  10. Java RandomAccessFile的使用（转载的文章，出处http://www.2cto.com/kf/201208/149816.html）

    Java的RandomAccessFile提供对文件的读写功能,与普通的输入输出流不一样的是RamdomAccessFile可以任意的访问文件的任何地方.这就是“Random”的意义所在. Rando ...