一款简洁的纯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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
canvas 绘图时位置偏离的问题解决
Sep 16 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
HTML的select控件美化
2017/03/27 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python找出最小的K个数实例代码
2018/01/04 Python
django反向解析和正向解析的方式
2018/06/05 Python
简单了解python的内存管理机制
2019/07/08 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
广告设计应届生求职信
2014/03/01 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
《穷人》教学反思
2016/02/19 职场文书
Android中的Launch Mode详情
2022/06/05 Java/Android