今天给大家分享一款基于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鼠标经过圆形旋转特效的更多相关文章

  1. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  2. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

  3. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  4. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  5. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  7. 一款基于css3非常实用的鼠标悬停特效

    今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 实现 ...

  8. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

随机推荐

  1. DG日志不应用，GAP,主备切换解决思路与办法

    环境ORACLE 10G OS WINDOWS 对于DG故障解决思路,DG日志切换不进行应用,DG出现GAP解决方法,DG主备库切换, 当DG出现故障时,第一时间检测alert日志,服务器OS日志,网 ...

  2. Asp.net 在网页编写C#代码示例-- 一个简单的web MsSql 命令执行环境

    在给一个客户做的系统上,因为要对数据库进行查看,但之前都是用TeamView来连接到客户的服务器进行数据库操作的 但最近客户那边的TeamView好像更改过密码导致我无法正常连接,而巧了客户的网官因为 ...

  3. 【python】列出http://www.cnblogs.com/xiandedanteng/p/中的标题

    # 列出http://www.cnblogs.com/xiandedanteng/p/中的标题 from bs4 import BeautifulSoup import requests user_a ...

  4. EXPDP/IMPDP与EXP/IMP在不同用户和表空间之间迁移数据的实现方法

    1. EXPDP/IMPDP方式 SQL> create user zlm identified by zlm; User created. SQL> grant connect,reso ...

  5. Oracle DB 复制数据库

    • 列出创建副本数据库的目的 • 选择用于复制数据库的方法 • 使用RMAN 复制数据库 • 使用RMAN 备份复制数据库 • 基于正在运行的实例复制数据库 使用副本数据库 • 使用副本数据库可执行以 ...

  6. 外媒关注：中国版Twitter新浪微博推出微米对抗微信

    Sina, China’s answer to Twitter, enters the mobile messaging battle with its own app 中国版Twitter新浪,用自 ...

  7. vue常用属性解释。

    props:详看 示例-网格组件. props 可以是数组或对象,用于接收来自父组件的数据.props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测.自定义校验和设置默认值 ...

  8. mysql 5.5安装手记

    从MySQL5.5 开始就要用cmake安装,本次安装的版本为mysql-5.5.22.tar.gz #准备工作 yum install -y gcc gcc-c++ libtool autoconf ...

  9. FastDFS简易概括

    FastDFS是一个文件系统,可以部署在Linux上. 该文件系统具备高可用和负载均衡特性,还可以动态扩充容量. 此文件系统有两个服务组成:跟踪服务和存储服务,也就是说你必须部署了这两种服务,这个文件 ...

  10. Centos 开启telnet-service服务

    1. 查看linux版本信息: [loong@localhost ~]$ cat /etc/issue CentOS release 5.8 (Final) Kernel \r on an \m 2. ...