一款简洁的纯css3代码实现的动画导航_html/css

一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:55:06

原创

1718人浏览过

之前为大家介绍了好多导航菜单，今天给大家分享一款简洁的纯css3代码实现的动画导航。鼠标经过的时候以背景色以菱形渐变为长方形。效果图如下：

在线预览源码下载

实现的代码。

html代码：

一键职达

AI全自动批量代投简历软件，自动浏览招聘网站从海量职位中用AI匹配职位并完成投递的全自动操作，真正实现'一键职达'的便捷体验。

查看详情

立即学习“前端免费学习笔记（深入）”；

  <div align="center" style="background-color: #ee1d27; padding: 20px;">        <div class="contener_link">            <div class="link_txt">                MENU ONE</div>        </div>        <div class="contener_link">            <div class="link_txt">                MENU TWO</div>        </div>        <div class="contener_link">            <div class="link_txt">                MENU THREE</div>        </div>    </div>

登录后复制

css3代码：

   .contener_link{  text-align: center;  position: relative;  width: 170px;  height: 50px;  cursor: pointer;  display: inline-block;}.contener_link .link_txt{  font-family:'Roboto';  position: absolute;  width: 150px;  font-weight: 300;  text-decoration: none;  font-size:22px;  padding: 10px;  color: #ffffff;}.contener_link:hover{  background-color: #f8b334;  -webkit-animation-duration:1s;  -webkit-animation-name: diaganim;  -moz-animation-duration:1s;  -moz-animation-name: diaganim;  -ms-animation-duration:1s;  -ms-animation-name: diaganim;  animation-duration:1s;  animation-name: diaganim;}@-webkit-keyframes diaganim {  0% {-webkit-transform: skewX(-80deg);}  100% {-webkit-transform: skewX(0deg);}}@-moz-keyframes diaganim {  0% {-moz-transform: skewX(-80deg);}  100% {-moz-transform: skewX(0deg);}}@-ms-keyframes diaganim {  0% {-ms-transform: skewX(-80deg);}  100% {-ms-transform: skewX(0deg);}}@keyframes diaganim {  0% {transform: skewX(-80deg);}  100% {transform: skewX(0deg);}}

登录后复制

大家都在看：

html滚动条渐变色怎么实现_html滚动条渐变色效果设置教程如何在Emacs中配置HTML多窗口编辑的详细步骤如何使用HTML构建移动端适配页面的详细步骤如何编辑网页HTML中的弹性盒子_如何编辑网页HTML中Flexbox弹性布局 HTML5在线如何构建图片编辑器 HTML5在线图像工具的完整教程