点击预览效果            下载该特效： 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. axis2调用webservice

    public static long TIMEOUTINMILLISECONDS=100000; /** * 调用webservice * @param url webserviceURL * @pa ...

  2. javascript笔记09：javascript的下拉式导航菜单

    <!DOCTYPE html> <html> <body> <script> function hideAll() { for(i=0;i<odi ...

  3. 自定的TableView

    一.自定的TableView 有的时候,我们需要vc视图中添加一个表视图,此时在ViewController中使用TableViewController是不可行的这就,因此就要使用自定义的TableV ...

  4. mvn export runnable jar

    mvn dependency:copy-dependencies <build> <plugins> <plugin> <groupId>org.apa ...

  5. Socket.io 0.7 – Sending messages to individual clients

    Note that this is just for Socket.io version 0.7, and possibly higher if they don’t change the API a ...

  6. Linux操作系统搭建LAMP开发环境

    Step1. 安装 Apache 在terminal中输入命令 sudo apt-get install apache2 打开浏览器,在地址栏输入:127.0.0.1,如果出现了 “It works! ...

  7. Discuz!nt整合心得

    最近研究了下Discuz!nt的整合,因为是网上找的实例,有个地方的写错了,导致纠结了一整天,这里分享出来. Discuz!nt提供了整合工具DiscuzToolkit,用于调用Discuz!nt A ...

  8. android .9文件的一点处理

    Android上面有很多平台,造成比较严重的碎片问题,适配比较困难,作为应用,一般都需要图文并茂,图片又是比较占资源的.面对缩放的问题,于是出来了矢量图片文件,作一点矢量处理,于是就是.9图片,IOS ...

  9. Android colors.xml

    <?xml version="1.0" encoding="utf-8"?><resources> <color name=&qu ...

  10. iOS开发——基于corelocation位置定位——工具类

    (代码工具类已写好,空闲时间整理成文档,待更新……)