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

遮罩层有很多今天介绍这个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>

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

转载：http://www.cnblogs.com/niuboren/p/6116211.html

转载于:https://www.cnblogs.com/wang1593840378/p/6124076.html

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

html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...
黑色响应式全屏滚动主页源码
介绍: html5黑色大气的个人博客全屏滚动个人主页源码下载,右键记事本即可修改. 网盘下载地址: http://kekewl.cc/ZNE7tnBEfKF0 图片:
CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg);/* 背景图垂直.水平均居中 */ background-p ...
几种实现动画效果的优化方法(will-change属性的使用）
几种实现动画效果的优化方法: 准备知识 GPU是图形处理器,专门处理和绘制图形相关的硬件.GPU是专为执行复杂的数学和几何计算而设计的,使得CPU从图形处理的任务中解放出来,可以执行其他更多的系 ...
html5下拉幻灯片插件,支持多种动画特效的响应式jQuery幻灯片插件
jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件.该幻灯片插件的文件体积效果,支持各种HTML元素,并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画. ...
Android学习之Android 5.0分享动画实现微信点击全屏效果
Android5.0过渡动画,请看 http://blog.csdn.net/qq_16131393/article/details/51112772 今天用分享动画实现微信点击全屏效果本文源代码下 ...
钢材php源码,PHP响应式宽屏大气的重工业钢铁钢材机械企业网站整站源码(自适应手机移动端) dedecms内核...
[温馨提示]源码包解压密码:www.youhutong.com 资源描述 PHP响应式宽屏大气的重工业钢铁钢材机械企业网站整站源码(自适应手机移动端) dedecms内核源码介绍: 采用织梦最新内核 ...
基于ijkplayer的视频播放器，仿Bilibili客户端，集成沉浸式全屏、弹幕、触屏控制、视频源切换等功能
该视频播放器基于Bilibili的开源项目ijkplayer做的,是在github上的demo基础上搭建了个播放界面,如果你之前有研究过这个demo代码,那你看这个库就非常简单了.至于还不知道ijkp ...
html实现全屏效果原理,HTML5 实现全屏效果
HTML5 实现全屏效果点击进入全屏和点击退出全屏方法: //进入全屏 function requestFullScreen() { var de = document.documentElemen ...

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

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

最新文章

热门文章