一款简洁的纯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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
Django实现图片文字同时提交的方法
2015/05/26 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python如何读写json数据
2018/03/21 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
老生常谈python中的重载
2018/11/11 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
python如何保存文本文件
2020/06/07 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
2014的自我评价
2014/01/13 职场文书
保健品市场营销方案
2014/03/31 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android