一款基于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= ...
随机推荐
- android:Layout_weight的深刻理解
最近写Demo,突然发现了Layout_weight这个属性,发现网上有很多关于这个属性的有意思的讨论,可是找了好多资料都没有找到一个能够说的清楚的,于是自己结合网上资料研究了一下,终于迎刃而解,写出 ...
- ActiveMQ API 详解
4.1 开发JSM的步骤 广义上说,一个JMS 应用是几个JMS 客户端交换消息,开发JMS 客户端应用由以下几步构成: 用JNDI 得到ConnectionFactory 对象: ...
- MongoDB 在 Mac OSX 平台安装
1.检查电脑是否安装 Homebrew(brew) 工具.如果没有安装,在终端执行下面命令. ruby -e "$(curl -fsSL https://raw.githubusercont ...
- PHP如何使用免费在线客服插件
1 你可以从以下网址下载http://www.hur.cn/Soft/2011/12448.html 2 解压并放到任意文件夹下 3 在安装之前,先在数据库中创建一个完整的数据库,因为待会儿安装完成之 ...
- 嵌入式 如何定位死循环或高CPU使用率(linux)
如何定位死循环或高CPU使用率(linux) 确定是CPU过高 使用top观察是否存在CPU使用率过高现象 找出线程 对CPU使用率过高的进程的所有线程进行排序 ps H -e -o pid,tid ...
- 简单测试Demo:如何用Java压缩文件夹和文件
一.直接贴出测试代码 package com.jason.zip; import java.io.File; import java.io.FileInputStream; import java.i ...
- uva：10487 - Closest Sums（二分查找）
题目:10487 - Closest Sums 题目大意:给出一组数据,再给出m个查询的数字. 要求找到这组数据里的两个数据相加的和最靠近这个查询的数据,输出那两个数据的和. 解题思路:二分查找.这样 ...
- 我们为什么在移动端项目中选择jQuery而不是Zepto
1.文件大小比较 首先从cnd上(http://www.bootcdn.cn/)下载jquery和zepto. jquery下载的是2.2.4版本压缩: zepto下载的是是1.20压缩版本: 二个文 ...
- 【Django】ImportError: cannot import name 'execute_manager'
错误描述 在使用Django 2.0 启动项目的时候,报错如下: ImportError: cannot import name 'execute_manager' 修改前后代码对比 修改前的代码 # ...
- JDBC 关于Date格式
package test; import java.sql.Connection; import java.util.Date; import java.sql.PreparedStatement; ...