基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果。里面包含两款不同效果的html5图片展示效果。效果图如下：
实现的代码。
html代码：
<div class="wrap" id="wrap">
<div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;
color: #ff6600;">
这是第一种风格</div>
<!-- 这个是第一种风格 Satrt-->
<main>
<ul class="ul items">
<li>
<figure class="effect-winston">
<img src="data:image/480_yugao.jpg" alt="轻网站公|lila">
<figcaption>
<h2>
轻网站公告
<span>
lila
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0111.jpg" alt="丽拉|lila">
<figcaption>
<h2>
丽拉
<span>
lila
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0110.jpg" alt="塔尔|taal">
<figcaption>
<h2>
塔尔
<span>
taal
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0109.jpg" alt="格瑞斯|grace">
<figcaption>
<h2>
格瑞斯
<span>
grace
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0108.jpg" alt="赛唯|seawee">
<figcaption>
<h2>
赛唯
<span>
seawee
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0107.jpg" alt="克里|cree">
<figcaption>
<h2>
克里
<span>
cree
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0106.jpg" alt="伊丽丝|iris">
<figcaption>
<h2>
伊丽丝
<span>
iris
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0105.jpg" alt="玛雅|maaya">
<figcaption>
<h2>
玛雅
<span>
maaya
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a> </figcaption>
</figure>
</li>
<li>
<figure class="effect-winston">
<img src="data:image/480_0104.jpg" alt="卡那|Carnac">
<figcaption>
<h2>
卡那
<span>
Carnac
</span>
</h2>
<p>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-demo">
</i>
</a>
<a href="http://sc.chinaz.com/" target="_blank">
<i class="icon-buy">
</i>
</a>
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
</ul>
</main>
<!-- 这个是第一种风格 End-->
<div style="float: left; padding-top: 30px; text-align: center; width: 100%; font-weight: bolder;
color: #ff6600;">
这是第二种风格</div>
<!-- 这个是第二种风格 Satrt-->
<main>
<ul class="ul items">
<li>
<figure class="effect-jazz">
<img src="data:image/480_soft_days.jpg" alt="云上的日子|soft days">
<figcaption>
<h2>
云上的日子
<br>
<span>
soft days
</span>
</h2>
<p>
单页
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_wedding_blessing.jpg" alt="婚礼的祝福|wedding blessing">
<figcaption>
<h2>
婚礼的祝福
<br>
<span>
wedding blessing
</span>
</h2>
<p>
喜帖
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_taste.jpg" alt="美食艺术家|taste">
<figcaption>
<h2>
美食艺术家
<br>
<span>
taste
</span>
</h2>
<p>
餐厅
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_dreamer.jpg" alt="梦想家|dreamer">
<figcaption>
<h2>
梦想家
<br>
<span>
dreamer
</span>
</h2>
<p>
商城
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_maple_leaf.jpg" alt="枫叶街|maple leaf">
<figcaption>
<h2>
枫叶街
<br>
<span>
maple leaf
</span>
</h2>
<p>
商城
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_My_Own_Secret.jpg" alt="秘密|My Own Secret">
<figcaption>
<h2>
秘密
<br>
<span>
My Own Secret
</span>
</h2>
<p>
店铺
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_wonder_world.jpg" alt="奇世界|wonder world">
<figcaption>
<h2>
奇世界
<br>
<span>
wonder world
</span>
</h2>
<p>
企业
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_misical_diary.jpg" alt="音乐日记|misical diary">
<figcaption>
<h2>
音乐日记
<br>
<span>
misical diary
</span>
</h2>
<p>
音乐
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
<li>
<figure class="effect-jazz">
<img src="data:image/480_guess.jpg" alt="猜想|guess">
<figcaption>
<h2>
猜想
<br>
<span>
guess
</span>
</h2>
<p>
博客
</p>
<a href="http://sc.chinaz.com/" target="_blank">
查看更多
</a>
</figcaption>
</figure>
</li>
</ul>
</main>
</div>
via：http://www.w2bc.com/Article/34610
基于html5鼠标悬停图片动画展示效果的更多相关文章
- jQuery鼠标悬停内容动画切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法
CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- CSS3鼠标悬停图片动画
鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...
- css3 鼠标悬停图片动画
<div class="grid"> <figure class="effect-milo"> <img src="im ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
随机推荐
- 普通spring jsp+mybatis项目修改为springboot + jsp +mybatis项目
概述 由于公司决定使用spring cloud,但是公司积累了大量的普通的jsp项目,老的项目直接全部修改为springboot成本过高,周期比较长,而且公司业务正在快速拓展,所以需要把之前的老项目修 ...
- Maven学习笔记(二) ：Maven的安装与配置
在Windows上安装Maven: 1. 首先检查安装JDK 通过命令行运行命令:echo %JAVA_HOME%和 java -version,能够查看当前java的安装文件夹及java的 ...
- （三）Linux Shell编程——Shell常用命令(输出、判断、循环、函数、包含)
3. 常用命令 3.1 输出 3.1.1 echo命令 echo是Shell的一个内部指令,用于在屏幕上打印出指定的字符串.命令格式: echo arg name="coding" ...
- 关于JavaScript中Get/Set访问器
有时候大家可能会纳闷,在使用JavaScript的时候,只需要给一个系统变量赋值就可以触发一系列操作去相应. 但是我们在写Js的时候,修改了一个自定义变量,却连个P都没有.是不是很郁闷呢? 其实,我们 ...
- C# 采用钩子捕获键盘和鼠标事件-验证是否处于无人操作状态
原文地址:https://www.cnblogs.com/gc2013/p/4036414.html 全局抽象类定义 using System; using System.Collections.Ge ...
- python学习笔记012——locals与globals
1 定义 globals() 功能:收集全局变量参数:无返回值:得到一个收集全局变量的字典(会包含系统的内置变量) locals() 功能:收集局部变量参数:无返回值:得到一个收集局部变量的字典 a ...
- C#开发Windows Services服务--服务安装失败的解决办法
问题1:“System.Security.SecurityException:未找到源,但未能搜索某些或全部事件日志.不可访问的日志: Security.” 正在运行事务处理安装. 正在开始安装的“安 ...
- 浅析I/O模型
以下是本文的目录大纲: 一.什么是同步?什么是异步? 二.什么是阻塞?什么是非阻塞? 三.什么是阻塞IO?什么是非阻塞IO? 四.什么是同步IO?什么是异步IO? 五.五种IO模型 六.两种高性能IO ...
- Singleton - 单例模式和Double-Checked Locking - 双重检查锁定模式
问题描述 现在,不管开发一个多大的系统(至少我现在的部门是这样的),都会带一个日志功能:在实际开发过程中,会专门有一个日志模块,负责写日志,由于在系统的任何地方,我们都有可能要调用日志模块中的函数,进 ...
- Windows 7下在DebugView中显示调试信息
自Windows Vista以来,调试信息在默认状态下是不显示的.为了显示调试信息,按照如下步骤设置即可: 1. 打开注册表: 2. 在HKLM\SYSTEM\CuurentControlSet\Co ...