一款基于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= ...
随机推荐
- c#实现随鼠标移动窗体
private void MainForm_Load(object sender, EventArgs e) { //绑定事件 MouseMove += Form_MouseMove; MouseDo ...
- IOS 预处理语句
程序中的源代码计算机是无法识别的,需要将写好的代码转成0.1二进制代码,计算机才能识别.将源代码转成二进制代码的需要经过两步,编译和链接.编译是通过编译器将每个文件的代码都转为二进制代码,在这个过程中 ...
- vb.net中将DataGridView与数据源绑定
在< .net中将DataGridView内的数据导出为Excel表格>中说了如何导出数据到Excel,今天这篇文章将讲述如何绑定数据源,在控件中显示我们需要的信息. 在敲机房收费系统的时 ...
- scala lambda 小括号与大括号
看akka源码的时候看到这样的一个用法: 作为接触scala两天半的我有些看不明白了.好一番搜索看到这样的答案: <scala雾中风景(2): 小括号与花括号> 下面的问题,表面上看是小括 ...
- SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入，安装失败
这几天研究SVG,发现"SVG Viewer 3.0安装发现SVG Viewer License.txt无法介入写入,安装失败"这个问题,晚上没找到解答的答案,后来被我们项目经理搞 ...
- 解决 同时安装 python3,python2环境时，用pip安装 python3 包
应用场景 默认mac上已经安装了 python2; 而我又安装了 python3,并使用 python3; 安装了 pip 默认,pip安装的包安装在了 python2上了: 但是我想用 pip把安装 ...
- 右键菜单 GenericMenu
http://www.cnblogs.com/zhaoqingqing/p/3799294.html 自定义窗口中使用右键菜单: // This example shows how to create ...
- js经常使用功能代码
js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...
- linux中echo的使用方法
1.echo命令我们经常使用的选项有两个,一个是-n,表示输出之后不换行.另外一个是-e,表示对于转义字符按对应的方式处理,假设不加-e那么对于转义字符会按普通字符处理. 2.echo输出时的转义字符 ...
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...