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

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

2024-07-02 20:19:59   231人阅读

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

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

立即下载      在线演示

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 -->

　　或者是下面这种结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 容器和菜单 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.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 转换元素。所以有部分例子你将不能够正确地看到那些效果。

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

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399183587&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franzige%2Fp%2F3706278.html&dt=1399183590986&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740&correlator=1399183590870&frm=20&ga_vid=429972749.1397695120&ga_sid=1399178814&ga_hid=1109436240&ga_fc=1&u_tz=480&u_his=224&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=tahoma&dfs=12&adx=0&ady=2761&biw=314&bih=74&eid=44901217%2C317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=3VCjqajSXL&p=http%3A//www.cnblogs.com&dtd=48" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399183587&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franzige%2Fp%2F3706278.html&dt=1399183591042&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740%2C8660799060&correlator=1399183590870&frm=20&ga_vid=429972749.1397695120&ga_sid=1399178814&ga_hid=1109436240&ga_fc=1&u_tz=480&u_his=224&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=tahoma&dfs=12&adx=304&ady=3011&biw=314&bih=74&eid=44901217%2C317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=B8z3dPt3VL&p=http%3A//www.cnblogs.com&dtd=57" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>


联系
我们