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

简介:   今天我们想与大家分享另一套过渡效果。这一次,我们将探讨如何实现侧边栏的过渡动画,就像我们已经在多级推出菜单中使用的。我们的想法是,以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。

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

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

 

 

立即下载      在线演示

 

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

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

  或者是下面这种结构:

<div id="st-container" class="st-container">
    <nav class="st-menu st-effect-1" id="menu-1">
        <!-- sidebar content -->
    </nav>
    <!-- content push wrapper -->
    <div class="st-pusher">
        <div class="st-content"><!-- this is the wrapper for the content -->
            <div class="st-content-inner"><!-- 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 容器和菜单 :

.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 转换元素。所以有部分例子你将不能够正确地看到那些效果。

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

 

立即下载      在线演示

 

您可能感兴趣的相关文章

 

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

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

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
前端开发
清明节,如何用代码让网页变灰
清明节,如何用代码让网页变灰
100 0
|
前端开发
前端很酷的按钮特效,你学会了吗?
分享代码了,如果觉得不错,可以花费两分钟学习哦 🤪
386 0
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
153 0
|
9月前
|
前端开发 JavaScript API
|
前端开发
前端知识案例-网页文档流
前端知识案例-网页文档流
73 0
前端知识案例-网页文档流
|
JavaScript 前端开发
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
890 0
|
Web App开发 JavaScript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
824 0
|
iOS开发 前端开发
35套用于扁平化设计的图标和网页元素《上集》
  扁平化设计是指舍弃渐变、阴影、高光等拟物化的视觉效果,从而打造出一种看上去更加平面化的界面风格。扁平化的网页设计更适合用于需要同时支持多种屏幕尺寸的响应式设计技术中。今天,我给大家带来35套用于扁平化设计的图标和网页元素,记得分享和推荐啊! 您可能感兴趣的相关文章 10套华丽的Wind...
839 0
|
前端开发 HTML5 移动开发
网页设计精粹:网页中那些迷人的按钮设计
  按钮是网页最重要的组成元素之一,是用户和网站进行交互的重要桥梁。要设计出优秀的按钮是一件非常困难的事情,因为设计师们需要从整体设计的角度考虑按钮设计成什么样的风格才能和页面的其它部分很好的融合,同时按钮的设计要操持风格的一致性。
1991 0
|
Web App开发 JavaScript 前端开发
使用 CSS3 打造一组质感细腻丝滑的按钮
  CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果。   温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
1101 0

热门文章

最新文章