一款简洁的纯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实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python同步两个文件夹下的内容
2019/08/29 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python实现二分查找算法
2020/09/18 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
保险公司晨会主持词
2014/03/22 职场文书
活动总结的格式
2014/05/07 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
2016银行求职自荐信
2016/01/28 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
python高温预警数据获取实例
2022/07/23 Python