jQuery10种不同动画效果的响应式全屏遮罩层

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

<div class="container">

            <header class="sucaihuo-header">

                <h1>全屏遮罩效果</h1>

                <nav class="sucaihuo-demos">

                    <a class="current-demo" href="index.html">Huge Inc</a>

                    <a href="index2.html">Corner</a>

                    <a href="index3.html">Slide down</a>

                    <a href="index5.html">Scale</a>

                    <a href="index6.html">Door</a>

                    <a href="index7.html">Content Push</a><br/>

                    <a href="index8.html">Content Scale</a>

                    <a href="index9.html">Corner Shape</a>

                    <a href="index10.html">Little Boxes</a>

                    <a href="index11.html">Simple Genie</a>

                    <a href="index12.html">Genie</a>

                </nav>

            </header>

            <section>

                <p>Overlay fades in and menu rotates slightly in perspective. As seen on <a href="http://hugeinc.com">Huge</a></p>

                <p><button id="trigger-overlay" type="button">Open Overlay</button></p>

            </section>

        </div><!-- /container -->

        <!-- open/close -->

        <div class="overlay overlay-hugeinc">

            <button type="button" class="overlay-close">Close</button>

            <nav>

                <ul>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">jQuery</a></li>

                    <li><a href="#">Html5</a></li>

                    <li><a href="#">Css3</a></li>

                    <li><a href="#">Contact</a></li>

                </ul>

            </nav>

        </div>

        <script src="js/classie.js"></script>

        <script src="js/demo1.js"></script>