今天给大家分享一款基于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. C#文件系统管理【转】

    目录 前言 Directory类和DirectoryInfo类 File类和FileInfo类 Path类 前言 管理文件系统主要是对计算机中文件和目录的管理,例如,读取文件信息.删除文件和读取目录信 ...

  2. [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge

    The development and production modes in webpack optimize the output in different ways. In developmen ...

  3. Java网络爬虫 - 一个简单的爬虫例子

    WikiScraper.java package master.haku.scrape; import org.jsoup.Jsoup; import org.jsoup.nodes.Document ...

  4. B/S学习总结

    经过5个月的学习,B/S学习的项目完毕了. 尽管项目完毕了,可是感觉自己还是差非常远.会的太少了.须要在项目中不断实战吧.以下分别对每一个项目进行总结. 牛腩新闻公布系统 简单介绍: 跟着视频里面的牛 ...

  5. 打造通用的Android下拉刷新组件(适用于ListView、GridView等各类View)

    前言 近期在做项目时,使用了一个开源的下拉刷新ListView组件.极其的不稳定,bug还多.稳定的组件又写得太复杂了,jar包较大.在我的一篇博客中也讲述过下拉刷新的实现,即Android打造(Li ...

  6. chrome打包程序

      使用chrome如何打包扩展程序中已经存在的插件及所遇到的问题 CreateTime--2017年7月4日07:41:33 Author:Marydon 一.前言 鉴于本文章的访问量大,特此进行多 ...

  7. 〖Linux〗Debian 7.1.0 Wheezy使用ltib报错的解决办法

    报错内容: scue@Link:/home/work/ltib$ ./ltib Processing platform: Phytec board with the NXP LPC32XX SoC = ...

  8. 在 Linux 系统下使用 PhotoRec 工具来恢复已删除或丢失的文件

    PhotoRec – Recover Deleted or Lost Files in Linux 在 Linux 系统下使用 PhotoRec 工具来恢复已删除或丢失的文件 当你在系统中有意或无意地 ...

  9. Windows 开发之VC++垃圾清理程序软件

    概述 本程序软件的主要实现垃圾文件清理的功能,即对指定的文件格式的临时文件或垃圾文件进行遍历.扫描.显示.删除清理等功能.在程序界面设计方面,对默认对话框重新自定义绘制,主要包括标题栏的重绘.对话框边 ...

  10. MySQL —— 如何快速对比数据？

    我们在MySql中想要对比下两个不同的实例上的数据并且找出差异,除了主键之外我们还要对比每一个字段,应该怎么做呢? 方案一:写一个程序将两个实例里面的每一行数据都分别取出来对比,但是耗时我们无法估计, ...