一款简洁的纯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 box-sizing属性
Apr 17 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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
php导入导出excel实例
2013/10/25 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python实现文件复制删除
2016/04/19 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
python实现在线翻译
2020/06/18 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
《阳光》教学反思
2014/02/23 职场文书
工作目标责任书
2014/07/23 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
国情备忘录观后感
2015/06/04 职场文书