今天给大家分享一款基于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. SQL VM上磁盘延迟高, 但Host和Storage Array上的延迟却很低的问题

    按照下面的步骤, 问题解决. =========================== Per Microsoft DDK, Microsoft storport.sys maintains a dev ...

  2. HTML5/CSS3实现添加锁屏效果

     锁屏效果,也就是将屏幕置于模态,不允许用户触发任何动作,只能解除锁定后才能继续使用,jQueryUI的dialog有模态对话框,这一点不难做到.那么,首先需要在页面中添加一个div层,用于做模态的层 ...

  3. myBatis批量添加，修改和删除

    摘自: http://blog.csdn.net/myjlvzlp/article/details/8434376 1.批量添加元素session.insert(String string,Objec ...

  4. vmware 传输(vmdb)错误-32:pipe:read failed 解决方法

    摘自: http://www.myzhenai.com.cn/post/1088.html 传输(vmdb)错误-32:pipe:read failed 解决方法   原创内容,转载请注明出处:htt ...

  5. 要点Java20 java.util.Collections

    java.util.Collections 集合帮助类 演示样例程序(JUnit演示) 排序 @Test public void testSort() { List<Integer> de ...

  6. window yii2 安装插件 报yiisoft/yii2 2.0.x-dev requires ext-mbstring错

    Problem 1 - yiisoft/yii2 2.0.x-dev requires ext-mbstring * -> the requested PHP extens ion mbstri ...

  7. 缓存jQuery对象来提高性能

    jQuery使元素的选择变得异常简单,这也是它快速流行起来的一大原因,如果你看刚刚开始使用jQuery朋友写的代码时,会发现很多数人写的代码都在滥用jQuery选择器.   如果你发现同一元素被查找多 ...

  8. 魔术布局效果-使用本地JSON数据提供数据服务

    在线演示 有社区朋友不知道如何修改外部OpenAPI为本地的JSON服务,这里做一个简单演示. 阅读原文:魔术布局效果-使用本地JSON数据提供数据服务

  9. 机器学习实战之PCA

    1.  向量及其基变换 1.1 向量内积 (1)两个维数同样的向量的内积定义例如以下: 内积运算将两个向量映射为一个实数. (2) 内积的几何意义 如果A\B是两个n维向量, n维向量能够等价表示为n ...

  10. java中循环控制结构

    1. break结束break所在循环 for(i……) { for(j……) { break;  //结束循环j } } 2.带标签的break. java中的标签只用在循环语句前面. outer: ...