一款基jquery超炫的动画导航菜单
2024-08-31 16:48:23
今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单，初始时页面中间一个按钮，单击按钮，菜单从左侧飞入页中。再次单击按钮，导航飞入左侧消息。动画效果很非常炫。一起看下效果图：
实现的代码。
html代码：
<ul>
<li><a href="http://www.w2bc.com">First</a></li>
<li><a href="http://www.w2bc.com">Second</a></li>
<li><a href="http://www.w2bc.com">Third</a></li>
<li><a href="http://www.w2bc.com">Fourth</a></li>
<li><a href="http://www.w2bc.com">Fifth</a></li>
</ul>
<button>
Animate</button>
<script src='jquery.js'></script>
<script> $('button').on('click', function () {
$('ul').toggleClass('animate');
}); //@ sourceURL=pen.js
</script>
css代码：
body
{
text-align: center;
} ul
{
width: 400px;
padding:;
margin: 0 auto;
}
ul.animate li
{
transform: translate(0);
}
ul.animate li:nth-of-type(1)
{
transition-delay: 0.05s;
}
ul.animate li:nth-of-type(2)
{
transition-delay: 0.1s;
}
ul.animate li:nth-of-type(3)
{
transition-delay: 0.15s;
}
ul.animate li:nth-of-type(4)
{
transition-delay: 0.2s;
}
ul.animate li:nth-of-type(5)
{
transition-delay: 0.25s;
} li
{
list-style: none;
display: block;
padding: 20px;
margin: 12px 0;
border-radius: 5px;
font-family: Helvetica, sans-serif;
color: #fff;
background: #8DE48D;
transform: translate(-500%);
transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.08);
}
li:nth-of-type(5)
{
transition-delay: 0.15s;
}
li:nth-of-type(4)
{
transition-delay: 0.3s;
}
li:nth-of-type(3)
{
transition-delay: 0.45s;
}
li:nth-of-type(2)
{
transition-delay: 0.6s;
}
li:nth-of-type(1)
{
transition-delay: 0.75s;
} button
{
padding: 12px 18px;
border: none;
border-radius: 3px;
color: #fff;
background: #7DBED8;
}
button:focus
{
outline: none;
}
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/9693
最新文章
- JS和JSON的区别
- redis数据类型之—Set
- HTML制作个人简历
- HDU1269 迷宫城堡
- Git Commands
- 《BI项目笔记》用Excel2013连接和浏览OLAP多维数据集
- HashMap的面试总结（摘抄）
- SpringMVC与ajax相关知识练习与存档
- JVM常用参数配置
- 在Windows下部署安装hexo
- Python ftplib
- AngularJS - contorller app module
- Windows phone 之Xml操作
- CentOS6.6普通用户使用sudo命令借用root用户权限
- 苹果WatchKit轻松入门
- Java中SJBArrayList自己简单实现ArrayList
- JavaScript 最终将在编程语言中占统治地位？
- Python设计模式 - UML - 定时图(Timing Diagram)
- Spring Cloud Ribbon入门
- win10自动锁屏问题