Home > Article > Web Front-end > 纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose
纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:001040browse
分享一款纯CSS3悬停图标旋转导航动画代码。这是一款鼠标移到图标上动画旋转显示导航菜单。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div id="x_contant"> <a class="xzt1" href="#"><img src="images/xztz_1.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt2" href="#"><img src="images/xzt_2.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt3" href="#"><img src="images/xztz_3.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt4" href="#"><img src="images/xzt_4.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt5" href="#"><img src="images/xztz_5.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt6" href="#"><img src="images/xzt_6.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a> <a class="xzt7" href="#"><img src="images/xztz_7.png" / alt="纯CSS3悬停图标旋转导航动画代码_html/css_WEB-ITnose" ></a></div>
via：http://www.w2bc.com/Article/42488
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：辛星浅析html中的name和id的区别_html/css_WEB-ITnoseNext article：pure的bug记录2_html/css_WEB-ITnose