创意无限！一组网页边栏过渡动画【附源码下载】

　　今天我们想与大家分享另一套过渡效果。这一次，我们将探讨如何实现侧边栏的过渡动画，就像我们已经在多级推出菜单中使用的。我们的想法是，以细微的过渡动画显示一些隐藏的侧边栏，其余的内容也是。通常侧边栏滑入，把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果，而今天这篇文章能够给你一些启示。

　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

 

立即下载      在线演示

 

　　因为我们希望能够在一个页面上展现所有的效果，因此我们示例的结果都是非常具体的。但在一般情况下，我们需要在 Push 容器内部或者外部的侧边栏元素，这取决于我们是要把侧边栏显示在 Push 容器的上面还是下面。所以，有两种 HTML 结构，第一种实现的代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="st-container" >     <!-- content push wrapper -->     <div >         <nav id="menu-1">             <!-- sidebar content -->         </nav>         <div ><!-- this is the wrapper for the content -->             <div ><!-- extra div for emulating position:fixed of the menu -->                 <!-- the content -->             </div><!-- /st-content-inner -->         </div><!-- /st-content -->     </div><!-- /st-pusher --> </div><!-- /st-container -->

　　或者是下面这种结构：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<div id="st-container" >     <nav id="menu-1">         <!-- sidebar content -->     </nav>     <!-- content push wrapper -->     <div >         <div ><!-- this is the wrapper for the content -->             <div ><!-- extra div for emulating position:fixed of the menu -->                 <!-- the content -->             </div><!-- /st-content-inner -->         </div><!-- /st-content -->     </div><!-- /st-pusher --> </div><!-- /st-container -->

　　效果七的 CSS 代码如下。我们把透视值添加到主容器，然后我们以 3D 效果旋转 Push 容器和菜单 ：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.st-effect-7.st-container {     perspective: 1500px;     perspective-origin: 0% 50%; }    .st-effect-7 .st-pusher {     transform-style: preserve-3d; }    .st-effect-7.st-menu-open .st-pusher {     transform: translate3d(300px, 0, 0); }    .st-effect-7.st-menu {     transform: translate3d(-100%, 0, 0) rotateY(-90deg);     transform-origin: 100% 50%;     transform-style: preserve-3d; }    .st-effect-7.st-menu-open .st-effect-7.st-menu {     visibility: visible;     transform: translate3d(-100%, 0, 0) rotateY(0deg); }

　　请注意，我们在这里使用 visibility 属性，因为在我们的演示中有多个侧边栏。如果你只是有一个侧边栏，你将不必把 visibility 属性从hidden 设置为 visible。

　　另外有些浏览器不支持伪元素（我们用来实现遮罩）的过渡（transitions），所以你在这些浏览器可能会看到一个快速闪烁（例如一些手机浏览器）。还有就是，IE10 不支持 transform-style: preserve-3d 效果，会破坏嵌套的 3D 转换元素。所以有部分例子你将不能够正确地看到那些效果。

　　我们希望这个集合给你一些灵感，创造出一些不错的效果。希望你会喜欢！

 

立即下载      在线演示

 

您可能感兴趣的相关文章

• 分享9款超炫的复选框（Checkbox）效果
• 真是好东西！一组动感的页面加载动画效果
• Codrops 教程：基于 CSS3 的全屏网页过渡特效
• Codrops 教程：基于 CSS3 的精美模态窗口效果
• Zepto.js – 为现代浏览器而生的轻量JavaScript库

 

本文链接：创意无限！很酷的网页边栏过渡动画 via Codrops

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文来自【梦想天空（http://www.cnblogs.com/lhb25/）】

创意无限！一组网页边栏过渡动画【附源码下载】,布布扣,bubuko.com

创意无限！一组网页边栏过渡动画【附源码下载】