一款简洁的纯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制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php分页函数
2006/07/08 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP如何将XML转成数组
2016/04/04 PHP
利用php输出不同的心形图案
2016/04/22 PHP
非常好的js代码
2006/06/27 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python写一个md5解密器示例
2018/02/23 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
先进事迹报告会主持词
2014/04/02 职场文书
大学学风建设方案
2014/05/04 职场文书
舞蹈专业求职信
2014/06/13 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python