一款基于css3鼠标经过圆形旋转特效
今天给大家分享一款基于css3鼠标经过圆形旋转特效。当鼠标经过的时候图片边框颜色旋转，图片显示详情。该实例适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：
实现的代码。
html代码：
<div class="case-content">
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/1.jpg" alt="学习LOS" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题一</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/2.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题二</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/3.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题三</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/4.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题四</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/5.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题五</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/3.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题六</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/2.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题七</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
<div class="case-item">
<div class="ih-item circle effect1">
<a href="http://www.w2bc.com/">
<div class="spinner">
</div>
<div class="img">
<img src="data:images/1.jpg" alt="学习" height="200" width="200"></div>
<div class="info">
<div class="info-back">
<h3>
标题八</h3>
<p>
好好学习，天天向上</p>
</div>
</div>
</a>
</div>
</div>
</div>
via：http://www.w2bc.com/Article/23952
一款基于css3鼠标经过圆形旋转特效的更多相关文章
- 基于css3的3D立方体旋转特效
今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...
- 纯css3实现的圆形旋转分享按钮
之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- 一款基于css3非常实用的鼠标悬停特效
今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览 源码下载 实现 ...
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
随机推荐
- Morton Code
莫顿码 ,实现了一维与二维(或多维)的转换.它通过交叉存储两个数的位产生一个数,即莫顿码. 可以应用于为一个整数对产生一个唯一索引. 例如,对于坐标系中的坐标点使用莫顿编码生成的莫顿码,可以唯一索引对 ...
- Android -- 经验分享（三）
目录 获取系统版本号 获取系统信息 获取安装路径和已安装程序列表 获取图片.应用名.包名 解决listview上Item上有按钮时item本身不能点击的问题 不让文本框输入中文 获取屏幕宽高 将Tab ...
- 对SVM的个人理解---浅显易懂
原文:http://blog.csdn.net/arthur503/article/details/19966891 之前以为SVM很强大很神秘,自己了解了之后发现原理并不难,不过,“大师的功力在于将 ...
- 【论文笔记】Leveraging Datasets with Varying Annotations for Face Alignment via Deep Regression Network
參考文献: Zhang J, Kan M, Shan S, et al. Leveraging Datasets With Varying Annotations for Face Alignment ...
- Java最大的优势真的在于跨平台吗？
下面讨论仅仅针对PC端和移动端. 曾经是,但如今已经不是了. 有跨平台需求的仅仅是client应用.而不是服务端.比如桌面应用,你的客户可能是Windows用户.也可能是Linux用户,这时候假设不想 ...
- （C++）浅谈多态基类析构函数声明为虚函数
主要内容: 1.C++类继承中的构造函数和析构函数 2.C++多态性中的静态绑定和动态绑定 3.C++多态性中析构函数声明为虚函数 1.C++类继承中的构造函数和析构函数 在C++的类继承中, 建立对 ...
- Android Activity的生命周期的几个方法介绍
onCreate():创建Activity调用,用于Activity的初始化,还有个Bundle类型的参数,可以访问以前存储的状态. onStart():Activity在屏幕上对用户可见时调用 on ...
- STL - 算法 - 普通拷贝
list<, , , , , , , , }; vector<int> coll2; cout << "** collection 1: **" &l ...
- busybox hexdump 命令使用
http://blog.sina.com.cn/s/blog_a6559d920101gvlk.html hexdump命令是Linux下的打印16进制的利器,它可以按我们指定的格式输出16进制,特别 ...
- HDU 4757
可持久化trie树.不会可持久化数据结构的话推荐先看陈立杰的论文.先掌握可持久化线段树和可持久化trie树. //可持久化trie树,题目已知一棵树,每个点有点权,询问一对点路径上点权与给定值异或的最 ...