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


Posted in HTML / CSS onOctober 31, 2014

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

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

实现的代码。

html代码:

复制代码
代码如下:
<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 / CSS 相关文章推荐
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 #HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 #HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 #HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 #HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 #HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 #HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 #HTML / CSS
You might like
基于Zookeeper的使用详解
2013/05/02 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
教师师德演讲稿
2014/05/06 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书