一款漂亮的动画边境反弹的菜单 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

科蚁网 科蚁网 科蚁学院 HTML5+CSS3教程 查看内容

一款漂亮的动画边境反弹的菜单

2015-7-16 16:57| 发布者: 科蚁网小编| 查看: 2758| 评论: 5|原作者: Manoela

摘要: 有一天我看到一个非常好的菜单UI8网站的概念。CreativeDash立即实现,华丽的概念,我有一些想法更多的影响涉及边界过渡也与桌面。所以今天,我想向您展示如何创建类似的东西,然后提供一些更多的鼓舞人心的例子。 ...


    有一天我看到一个非常好的菜单UI8网站的概念。CreativeDash立即实现,华丽的概念,我有一些想法更多的影响涉及边界过渡也与桌面。所以今天,我想向您展示如何创建类似的东西,然后提供一些更多的鼓舞人心的例子。

请注意,我们将使用转换和动画也不会工作在一些浏览器(例如SafariMobile Safari)

所以,让我们开始吧!

标记

菜单的HTML结构将由一个 nav元素将包含一个触发锚和一个无序列表图标的菜单项,包括:

<nav id="bt-menu" class="bt-menu">

         <a href="#" class="bt-menu-trigger"><span>Menu</span></a>

         <ul>

                 <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>

                 <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>

                 <li><a href="#" class="bt-icon icon-lock">Lock</a></li>

                 <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>

                 <li><a href="#" class="bt-icon icon-star">Favorite</a></li>

         </ul>

</nav>

让我们这种风格。

CSS

注意,CSS将不会包含任何特定的前缀,但你会发现他们在文件。
让我们使用border-box box-sizing:

*,

*:after,

*::before {

         box-sizing: border-box;

}

让我们设置一些身体和主容器的样式:

body  {

         background: #04a466;

}

 

.container {

         padding: 80px;

}

填充将帮助提供一些空间在我们的内容,因此当出现边界,我们保证有足够的空间。

主菜单元素位置固定,这样,无论我们所在的页面,边境总是在视窗。我们设置一个初始边框样式,但是这个价格我们将过渡到一个更大的边界。最初的高度设置为0将确保不包括任何最初的菜单。落后或关闭高度过渡将会有一个延迟0.3年代:

.bt-menu {

         position: fixed;

         top: 0;

         left: 0;

         width: 100%;

         height: 0;

         border-width: 0px;

         border-style: solid;

         border-color: #333;

         background-color: rgba(0,0,0,0);

         transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;

}

当我们打开菜单,我们将设置高度为100%(��们不会过渡,财产)和边界将动画左侧90 px30 px的所有其他方面。背景颜色将半透明使用RGBA价值。这将服务器作为叠加颜色:

.bt-menu.bt-menu-open {

         height: 100%;

         border-width: 30px 30px 30px 90px;

         background-color: rgba(0,0,0,0.3);

         transition: border-width 0.3s, background-color 0.3s;

}

现在我们不得不使用一个小技巧。我们将添加另一个元素使用JavaScript将服务器作为虚拟容器覆盖整个页面,除了边境。这将使我们能够区分我们点击关闭整个事情。我们不希望菜单关闭当单击边界只有当点击之间的空间。

.bt-overlay {

         position: absolute;

         width: 100%;

}

当我们打开菜单,这个元素会有完整的高度:

.bt-menu-open .bt-overlay {

         height: 100%;

请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

提取码:Manoela 
下载次数:1    下载所需积分:0 枚资源币
下载权限: 新手上路  [如何获取资源币]   [充值科蚁币]  可 [兑换资源币]   [投诉报错]  

5

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (6 人)

发表评论

最新评论

引用 yyit 2016-4-28 12:06
感谢分享
引用 QQ群521595826 2016-1-5 22:53
【怎么学习网页制作】 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会的,没有人指导你,而且很多视频已经过时了 并没有什么用!  如果你真的想学习网页制作这门技术,你可以来这个群  前面是五二一,中间是五九五,后面是八二六  在这里有最新的网页制作课程 每晚免费课堂学习 课后老师答疑解惑  也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 如果不是真心想学习的就不要加了!
引用 筑墙碎梦 2015-10-30 09:16
感谢分享
引用 筑墙碎梦 2015-10-21 17:18
不错,感谢分享
引用 筑墙碎梦 2015-10-21 17:18
不错,学习了

查看全部评论(5)


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群