分享一款纯CSS3悬停图标旋转导航动画代码。这是一款鼠标移到图标上动画旋转显示导航菜单。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="x_contant">
<a class="xzt1" href="#"><img src="data:images/xztz_1.png" /></a>
<a class="xzt2" href="#"><img src="data:images/xzt_2.png" /></a>
<a class="xzt3" href="#"><img src="data:images/xztz_3.png" /></a>
<a class="xzt4" href="#"><img src="data:images/xzt_4.png" /></a>
<a class="xzt5" href="#"><img src="data:images/xztz_5.png" /></a>
<a class="xzt6" href="#"><img src="data:images/xzt_6.png" /></a>
<a class="xzt7" href="#"><img src="data:images/xztz_7.png" /></a>
</div>

via:http://www.w2bc.com/Article/42488

纯CSS3悬停图标旋转导航动画代码的更多相关文章

  1. 一款纯css3实现的环形导航菜单

    之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览  ...

  2. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  3. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

  4. 源码分享-纯CSS3实现齿轮加载动画

    纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html

  5. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  6. 纯CSS3实现漂亮的价格表样式代码

    分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main" ...

  7. 用CSS3制作的旋转六面体动画

    这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

随机推荐

  1. Html插入Flash.object.embed.swf各个参数值详解介绍[等比例缩放]

    http://www.dayku.cn/space-3-do-blog-id-544.html 目也在此列出. Internet Explorer 可识别用于 object 标签的参数:Netscap ...

  2. 【ASP.NET】@Model类型的使用详解

    有时需要在ASP.NET MVC4的视图的@model中使用多个类型的实例,.NET Framework 4.0版本引入的System.Tuple类可以轻松满足这个需求. 假设Person和Produ ...

  3. 基于matplotlib的数据可视化 - 等高线 contour 与 contourf

    contour 与contourf 是绘制等高线的利器. contour  - 绘制等高线 contourf - 填充等高线 两个的返回值值是一样的(return values are the sam ...

  4. cron执行service

    在Cron的环境下,是没有定义路径的,所以,service xxx start等等要使用绝对路径 => /sbin/service xxx start service的路径可以用whereis ...

  5. Http常见错误收集

    HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表明传输给服务器的证 ...

  6. Android基础之——CountDownTimer类,轻松实现倒计时功能

    在发现这个类之前,一直是用的handler,子线程发消息,UI线程进行倒计时的显示工作.前几天在做一个倒计时显示的时候发现了这个类,用起来非常方便 翻看了下源代码.内部已经帮我们实现了handler的 ...

  7. 【转】Markdown 的一些问题

    Markdown 的一些问题 把我之前的博文基本上转换成了 markdown 格式.我发现 markdown 虽然在编辑器里看起来比 HTML 清晰一些,但也有一些不足. 这些 markup 语言的格 ...

  8. RecylerView 的使用方法

    package com.cardvalue.sys.fragment; import android.content.Intent; import android.net.Uri; import an ...

  9. JetBrains PyCharm专业版激活

    PyCharm最新2018激活码 激活时选择License server 填入 http://idea.imsxm.com 然后点击Active即可 PS:在线激活有一个过期时间,这个时间一过就必须再 ...

  10. JAVA中使用HTTP 1.1提高基于AXIS 1.4的web service的性能

    HTTP 1.1会在第一次连接的时候进行认证, 而在一定时间内保持连接而不用重新验证. 一般情形下,每个web service请求都会在web service服务端验证, 而验证会消耗很多时间, 因此 ...