`

真是好东西!一组动感的页面加载动画效果

阅读更多

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

  温馨提示:为保证最佳的效果,请在 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

 

0
0
分享到:
评论

相关推荐

    jquery插件库-动感的页面加载动画效果.zip

    本资源"jquery插件库-动感的页面加载动画效果.zip"提供了一组专用于创建动感页面加载动画的jQuery插件。这些插件能够提升用户体验,使得用户在等待网页内容加载时不再感到枯燥乏味。 首先,我们要理解jQuery的核心...

    动感音乐超级酷炫多个开场加载动画ppt特效模板.rar

    "动感音乐超级酷炫多个开场加载动画ppt特效模板.rar"是一个专门为PowerPoint(PPT)设计的资源,它包含了多种富有创意和动感的加载动画,旨在使演示文稿的开场更加引人入胜。下面我们将深入探讨这个压缩包中的知识点...

    一组动感的页面切换效果

    本文将深入探讨“一组动感的页面切换效果”这一主题,包括其在HTML中的实现方式,以及JavaScript(js)和jQuery(jq)在其中起到的关键作用。 首先,我们要明白HTML(超文本标记语言)是网页内容的基础结构框架,而...

    基于jquery+css3实现的13种动感页面加载动画特效源码.zip

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建13种动感十足的页面加载动画特效。这两种技术是现代Web开发中不可或缺的部分,jQuery简化了JavaScript操作,而CSS3则为网页带来了丰富的动态效果。 首先,...

    使用Piecon实现动感的网页图标加载动画代码.rar

    今天这篇文章教大家如何使用 Piecon 生成动感的网页图标加载动画,效果如下: Piecon 是著名的代码托管平台 Github 上的开源库,能够动态生成饼图(Pie Charts)模式的网页图标,同时可以显示加载的百分比。它的灵感...

    页面跳转的动画效果

    下面将详细讲解页面跳转动画效果的相关知识点,并结合"动感的页面加载动画效果"这一主题,探讨如何实现各种动态过渡效果。 1. **CSS3动画**:CSS3是实现页面跳转动画的关键技术,它提供了多种动画属性,如`...

    Android实战页面内容加载动画

    在Android开发中,页面内容加载动画是提升用户体验的重要一环,尤其是在等待数据加载或网络请求时,一个美观且富有动感的加载动画可以有效地缓解用户的焦虑感。本篇将深入探讨如何在Android应用中实现这样的功能,...

    css3 transform属性创意Loading加载动画效果

    在创建Loading加载动画时,`transform`属性能帮助我们实现动态的视觉效果,为页面增添动感与趣味性。 在这款特定的加载动画中,设计者巧妙地运用了机械臂的概念,通过`transform`属性模拟了机械臂的运动。机械臂的...

    仿UC加载动画

    这种加载动画通常具有简洁、动感且易于理解的特点,以吸引用户的注意力,同时暗示程序正在后台忙碌处理。UC浏览器的加载动画因其独特性和辨识度而被广泛模仿。 加载动画的设计原理主要包括以下几个方面: 1. **...

    CSS3线条旋转加载动画.zip

    这个名为“CSS3线条旋转加载动画.zip”的资源包含了一系列利用CSS3技术实现的线条加载动画,旨在为网页添加富有科技感和动感的加载效果。 CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它引入了许多新...

    WOW.js在页面滚动时展现动感的元素动画效果

    通过这种方式,WOW.js使得动画效果与用户的交互更加紧密,而不是在页面加载时一次性全部播放,从而提高了网页的性能。 ### 2. animated.css **animated.css** 是一套基于Animate.css的CSS3动画库,包含了一系列预...

    一个全屏的加载动画效果实现

    如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站,你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行,因此这篇文章想给你带来一些启示。  这个效果的...

    28种CSS3炫酷loading页面加载动画特效代码.

    在网页设计中,页面加载动画(Loading)是一种常见的用户体验优化手段,它能为用户提供视觉反馈,使等待过程显得不那么枯燥。CSS3的引入,使得开发者能够创建出丰富多样且性能优秀的加载动画。本教程将详细介绍28种...

    页面动感loading特效代码

    在网页设计中,加载动画(通常被称为“Loading”或“加载中”特效)是一种重要的用户体验元素,它在页面内容还未完全加载完毕时提供视觉反馈,让用户知道网站正在努力处理请求。"页面动感loading特效代码"是指用于...

    Skype纯CSS3加载动画特效.zip

    【Skype纯CSS3加载动画特效】是一种利用CSS3技术实现的动态加载效果,常见于登录界面,以增强用户体验,展示数据正在加载的过程。这种特效通过圆点的旋转动画,形成一种视觉上的动感,使用户在等待过程中不会感到...

    手机APP切换页面动画过渡效果

    在页面切换动画中,可以使用关键帧(@keyframes)定义页面变换的各个阶段,通过改变元素的位置、大小、旋转等属性,创造出更为复杂和动感的效果。 在这个项目中,开发者可能使用了以下CSS3技术: - `transform`属性...

    CSS3绿色Loading加载动画特效.zip

    在本文中,我们将深入探讨如何使用CSS3来创建引人注目的绿色Loading加载动画特效,以及这个特定的“CSS3绿色Loading加载动画特效.zip”文件可能包含的内容。CSS3是层叠样式表(Cascading Style Sheets)的第三个版本...

    过渡加载动画

    过渡加载动画在移动应用和网页设计中扮演着重要的角色,为用户提供反馈,表明系统正在处理数据或内容。Material Design是一种由Google推出的界面设计语言,它强调了清晰度、深度和动感,为数字产品提供了统一的设计...

    30款css3页面加载等待动画特效.zip

    5. **Grid布局**:对于更复杂的加载动画,可能使用CSS Grid布局来创建网格系统,使多个元素在页面上精确定位,产生协调的动画效果。 6. **JavaScript增强**:虽然主要基于CSS3,但这些加载动画可能还结合了...

Global site tag (gtag.js) - Google Analytics