今天给大家分享一款基于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. 关闭使用ShellExecute打开的进程！！！！！

    前言: 最近做一个项目使用到ShellExecute来打开一个带参数的外部exe文件,关闭时遇到不少问题,最终解决,总结如下. 对于关闭ShellExecute打开的进程窗口,网上比较多的是用Find ...

  2. 82. Remove Duplicates from Sorted List II && i

    题目 83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such tha ...

  3. 领扣-209 长度最小的子数组 Minimum Size Subarray Sum MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. 【Python】Python Mako模板使用

    参考资料: Mako Templates for Python官网:http://www.makotemplates.org/ Python模板库Mako的用法:http://my.oschina.n ...

  5. python 3 爬取百度图片

    python 3 爬取百度图片 学习了:https://blog.csdn.net/X_JS612/article/details/78149627

  6. CSS经验分享：如何书写可维护的CSS代码01

    转自:http://www.cnblogs.com/hxling/archive/2013/02/21/2920520.html 一.在样式表开头添加一个注释块,用以描述这个样式表的创建日期.创建者. ...

  7. docker下搭建gitlab

    [root@localhost ~]# docker run \ > --name='gitlab' \ > -itd \ > --link gitlab_mysql:mysql \ ...

  8. 算法笔记_036:预排序（Java）

    目录 1 问题描述 2 解决方案 2.1 检验数组中元素的唯一性 2.2 模式计算   1 问题描述 在计算机科学中,预排序是一种很古老的思想.实际上,对于排序算法的兴趣很大程度上是因为这样一个事实: ...

  9. Linux crond实例

    linux系统的定时任务: 1:linux系统自身定期执行的任务工作:系统周期性执行的任务工作,如轮询系统日志,备份系统数据,清理系统缓存等. [root@10-4-5-9 ~]# ll /var/l ...

  10. javascript 的继承实例

    shape.prototype = { getEdge:function(){ return this.edge; }, getArea:function(){ return this.a*this. ...