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

在线预览   源码下载

实现的代码。

html代码:

  1. <div id="x_contant">
  2. <a class="xzt1" href="#"><img src="data:images/xztz_1.png" /></a>
  3. <a class="xzt2" href="#"><img src="data:images/xzt_2.png" /></a>
  4. <a class="xzt3" href="#"><img src="data:images/xztz_3.png" /></a>
  5. <a class="xzt4" href="#"><img src="data:images/xzt_4.png" /></a>
  6. <a class="xzt5" href="#"><img src="data:images/xztz_5.png" /></a>
  7. <a class="xzt6" href="#"><img src="data:images/xzt_6.png" /></a>
  8. <a class="xzt7" href="#"><img src="data:images/xztz_7.png" /></a>
  9. </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. 解决线上服务logback 乱码问题

    从网上查询资料 获得以下结果 1 设置 project 和file 文件为utf-8 编码 2 设置 logback 文件内容 <appender name="CONSOLE" ...

  2. mysql慢查询日志相关参数

    -- mysql慢查询日志相关参数 -- 慢查询日志时间 show variables like "long_query_time"; -- 将时间设置为2s ; -- 是否开启慢 ...

  3. appium简明教程(2)——appium的基本概念

    Client/Server Architecture appium的核心其实是一个暴露了一系列REST API的server. 这个server的功能其实很简单:监听一个端口,然后接收由client发 ...

  4. javascript控件(二):一个好用的表格(分页实例)

    一.官网 https://datatables.net/ 二.引用 <script src="bower_components/datatables.net/js/jquery.dat ...

  5. 实战Apache+Tomcat集群和负载均衡

    实战Apache+Tomcat集群和负载均衡 目录 1.    什么是J2EE集群... 3 1.1.     序言... 3 1.2.     基本术语... 3 伸缩性(Scalability): ...

  6. Mac下命令行下载android源代码并构建apk过程

    前提是java .sdk.ndk .cmake.gradle .gradlew都已经安装和配置好. 1.下载源码: git clone http://git-ma.xxxx.com.cn/xxxx/x ...

  7. Guid ToString 格式

    转自 http://www.cnblogs.com/greenerycn/archive/2010/04/25/guid_tostring_format.html 在日常编程中,Guid是比较常用的, ...

  8. php分享二十六:读写日志

    一:读写日志注意事项: 1:fgets取出日志行后,注意用trim过滤下 2:explode(“\t", $line) 拆分后,注意判断下个数是否正确,如果不正确,怎么处理?   如果某一列 ...

  9. 权限管理系统(五):RBAC新解,基于资源的权限管理

    本文讨论以角色概念进行的权限管理策略及主要以基于角色的机制进行权限管理是远远不够的.同时我将讨论一种我认为更好的权限管理方式. 1.什么是角色 当说到程序的权限管理时,人们往往想到角色这一概念.角色是 ...

  10. Darwin Streaming Server for Windows 安装

    最近搞流媒体相关的项目,于是打算在局域网搭建一个流媒体服务器.本以为很快搞定的,但是,在安装过程中还是折腾了一番. 现把安装流程记下来: 一.下载 Darwin Streaming Server fo ...