纯CSS3悬停图标旋转导航动画代码
分享一款纯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悬停图标旋转导航动画代码的更多相关文章
- 一款纯css3实现的环形导航菜单
之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单.该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周.形成一个环形.效果图如下: 在线预览 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 源码分享-纯CSS3实现齿轮加载动画
纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦ 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用
- 纯CSS3实现漂亮的价格表样式代码
分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main" ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
随机推荐
- 【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【一】
如果你经常留迹于各大论坛.博客,肯定对它们的富编辑器稍有印象.纯 Javascript 富编辑器可以说是前台 JS 脚本的巅峰作品.一款完整的编辑器,其复杂的功能,会让你遇到各种头痛的浏览器兼容问题, ...
- Android Studio 2.3 正式版新功能,你不来看看?!
2017.3.3 Google老大发布了Android Studio 2.3正式版. 在许多2.3beta版本的基础上修复了bug然后推出了正式版.提供了一些新特性,和对部分已有功能的修改完善. Bu ...
- Swift 下标脚本
前言 在访问一个数组实例的元素时,可以使用 Array[index] 的形式.在访问一个字典实例的元素时,可以使用 Dictionary[index] 的形式.这种方括号的形式就是 "下标脚 ...
- 一步一步掌握java的线程机制(一)----创建线程
现在将1年前写的有关线程的文章再重新看了一遍,发现过去的自己还是照本宣科,毕竟是刚学java的人,就想将java的精髓之一---线程进制掌握到手,还是有点难度.等到自己已经是编程一年级生了,还是无法将 ...
- exp、Exploit、Exploit Pack、exp-gui、Payload、MetaSploit都是啥?
对于走在安全路上的小菜来说,这几个exp.Exploit.Exploit Pack.exp-gui.Payload.MetaSploit名词着实把人转的不轻,以下给大家解释下: Exp,就是Explo ...
- getenv()函数
在PHP中getenv(参数)函数是一个用于获取环境变量的函数,根据提供不同的参数可以获取不同的环境变量,具体如下: “PHP_SELF” 当前正在执行脚本的文件名,与document root 相关 ...
- JS实现PC、Android、IOS端的点击按钮复制内容功能
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JSTL标签之<c:choose><c:when><c:otherwise>标签
假设是JSTL1.1版本号,使用<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" ...
- [LeetCode] Meeting Rooms I & II
Meeting Rooms Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s ...
- nginx check_http_send type=http 查检测不到后端TOM的存活
原因:定位到../conf/server.xml中 <Connector port="8020" protocol="org.apache.coyote.http1 ...