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

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

阅读量：6227 次

发布时间：2019-06-21

本文共 1419 字，大约阅读时间需要 4 分钟。

遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层

实例代码

                            
<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>
         
       