一款简洁的纯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实现的几个小loading效果
Sep 27 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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
smarty section简介与用法分析
2008/10/03 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
帝国cms目录结构分享
2015/07/06 PHP
php bootstrap实现简单登录
2016/03/08 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python3人脸识别的两种方法
2019/04/25 Python
python数据爬下来保存的位置
2020/02/17 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
通过Python实现一个简单的html页面
2020/05/16 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
药品营销策划方案
2014/06/15 职场文书
刑事代理授权委托书
2014/09/17 职场文书
会议开幕词
2015/01/28 职场文书
党员个人总结范文
2015/02/14 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL