前端JS特效第3集：19种html5+CSS3绚丽的弹出窗口动画过渡效果

最新推荐文章于 2024-07-21 22:10:10 发布
最新推荐文章于 2024-07-21 22:10:10 发布
阅读量431 收藏 1
点赞数 9
文章标签： 前端 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85903333/article/details/139998848
版权

19种html5+CSS3绚丽的弹出窗口动画过渡效果，先来看看效果：

部分核心的代码如下(全部代码在文章末尾)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂亮的模态窗效果</title>

<link rel="stylesheet" type="text/css" href="css/default.css" />

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="js/modernizr.custom.js"></script>

</head>
<body>
		<!-- All modals added here for the demo. You would of course just have one, dynamically created -->
		<div class="md-modal md-effect-1" id="modal-1">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-2" id="modal-2">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-3" id="modal-3">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-4" id="modal-4">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-5" id="modal-5">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-6" id="modal-6">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-7" id="modal-7">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-8" id="modal-8">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-9" id="modal-9">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-10" id="modal-10">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-11" id="modal-11">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-12" id="modal-12">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-13" id="modal-13">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-14" id="modal-14">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-15" id="modal-15">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-16" id="modal-16">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-17" id="modal-17">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-18" id="modal-18">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-19" id="modal-19">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-20" id="modal-20">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		
		<div class="container">

			<div class="main clearfix">
			
				<div class="column">
					<p>有许多可能性模态叠加出现。这里有一些现代的方式显示他们使用CSS转换和动画。</p>
				</div>
				
				<div class="column">
					<button class="md-trigger" data-modal="modal-1">Fade in &amp; Scale</button>
					<button class="md-trigger" data-modal="modal-2">Slide in (right)</button>
					<button class="md-trigger" data-modal="modal-3">Slide in (bottom)</button>
					<button class="md-trigger" data-modal="modal-4">Newspaper</button>
					<button class="md-trigger" data-modal="modal-5">Fall</button>
					<button class="md-trigger" data-modal="modal-6">Side Fall</button>
					<button class="md-trigger" data-modal="modal-7">Sticky Up</button>
					<button class="md-trigger" data-modal="modal-8">3D Flip (horizontal)</button>
					<button class="md-trigger" data-modal="modal-9">3D Flip (vertical)</button>
					<button class="md-trigger" data-modal="modal-10">3D Sign</button>
					<button class="md-trigger" data-modal="modal-11">Super Scaled</button>
					<button class="md-trigger" data-modal="modal-12">Just Me</button>
					<button class="md-trigger" data-modal="modal-13">3D Slit</button>
					<button class="md-trigger" data-modal="modal-14">3D Rotate Bottom</button>
					<button class="md-trigger" data-modal="modal-15">3D Rotate In Left</button>
					<button class="md-trigger" data-modal="modal-16">Blur</button>
					<!-- special modal that will add a perspective class to the html element -->
					<button class="md-trigger md-setperspective" data-modal="modal-17">Let me in</button>
					<button class="md-trigger md-setperspective" data-modal="modal-18">Make way!</button>
					<button class="md-trigger md-setperspective" data-modal="modal-19">Slip from top</button>
				</div>
			</div>
		</div><!-- /container -->
		
		<div class="md-overlay"></div><!-- the overlay element -->

		<!-- classie.js by @desandro: https://github.com/desandro/classie -->
		<script src="js/classie.js"></script>
		<script src="js/modalEffects.js"></script>

		<!-- for the blur effect -->
		<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
		<script>
			// this is important for IEs
			var polyfilter_scriptpath = '/js/';
		</script>
		<script src="js/cssParser.js"></script>
		<script src="js/css-filters-polyfill.js"></script>
		
</body>
</html>

全部代码：19种html5+CSS3绚丽的弹出窗口动画过渡效果

强迫领导写Bug
关注
js弹窗弹出隐藏动画
qq_40796623的博客
07-12 527
弹窗动画
3 css 奖品出现弹出动画_用CSS3动画特效实现弹窗效果
weixin_42309773的博客
12-30 1246
CSS特殊效果/*---------------------公共样式 -------------------*/body{background:#000;}.none{display:none;}.layout-root{position:fixed;background:#E74C3C;height:100%;width:100%;z-index:1000;top:0;left:0;}.layo...
漂亮的div弹出窗口
03-19
漂亮的div弹出窗口,可拖动，非常使用 。漂亮的div弹出窗口,可拖动，非常使用
15个非常漂亮的ajax弹窗效果 针对Lightbox和Modal Dialog
网站爱好者
01-11 1843
<br />运用Lightbox和Modal Dialog可以很方便地在浏览器中展示内容，而无需重载整个页面，有了Lightbox就不必再使用浏览器弹窗了。Lightbox正愈来愈广泛地应用于媒体、网页、邮件、表格等元素的展示。<br />　　本文将为你介绍15款优秀的Lightbox和Modal Dialog特效，供网站开发者参考。<br />　　1. Facebox<br />　　facebox是一个jquery为基础的Lightbox，可显示图像，divs，或者远程页面。它的使用很简单。<br />　
HTML+CSS+JS精美气泡提示框
最新发布
w11111xxxl的博客
07-21 601
【代码】HTML+CSS+JS精美气泡提示框。
用JS制作9种弹出小窗口(HTML)
yiye2017zhangmu的博客
09-20 2541
进入许多网站时，有弹出式小窗口，它们五花八门，使我们捉摸不透下面就来介绍用JS制作9种制作弹出小窗口： 1、最基本的弹出窗口代码           其实代码非常简单：           &lt; SCRIPT LANGUAGE="javascript"&gt;          &lt; !--          window.open ("page.html")          --...
Vue 组件间的通信(1)
2401_84436058的博客
04-29 565
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
js实现动画效果的弹出窗口
11-10
从一个图片浏览的例子改的，IFrame你要打开的页面即可，带左右上下扩张的动画效果，支持多个页面切换，切换时带动画效果的宽度和高度调整，效果保证令人惊叹，嘻嘻，我改的
js动画弹出动画
02-02
js动态弹出动画响应式模态框单击按钮激活模式。三个演示，代码都在简单易懂
漂亮的html弹出层弹出窗口
09-20
漂亮的弹出层，弹出窗口的jquery方法，forZDialogDemo.html为演示页面，为普通的html开发提供便利，非常方便，漂亮，适用于各种浏览器，兼容性好
一个漂亮的弹出窗口
weixin_30361641的博客
09-24 131
一个不错的弹出窗口，修改了JS文件可多弹。首先要导入jQuery（如：jquery-1.3.2.min.js）的包和弹出框所需的JS包（dialog.js），并添加JS指定需要的图片路径（图片和要用到的JS包都放到了网盘里，网盘地址：http://e.ys168.com/?rememberxing的ASP.NET相关附件目录里面）<scripttype="text/javascr...
漂亮的div弹出窗口样式
10-29
一个漂亮的div弹出窗口样式 解压后双击html页面即可
JS简单实现动画弹出层效果
10-24
本文给大家介绍的是是一款javascript弹出层特效,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。
css3-弹出窗口弹出效果
02-18
多款css3-弹出窗口弹出效果，文件为DEMO，集合多种弹窗效果。
多种CSS3弹出窗效果源码
12-13
CSS多种弹出窗效果源码
19种html5 CSS3绚丽的弹出窗口动画过渡效果.zip
07-11
19种html5 CSS3绚丽的弹出窗口动画过渡效果
js+css3 3D波浪动画焦点图轮播切换特效
06-09
"js+css3 3D波浪动画焦点图轮播切换特效"就是一个利用这两种技术实现的创新设计，它能够提升用户体验，吸引用户在网站上停留更长时间。 首先，我们来详细了解一下这个特效的核心组成部分： 1. **JavaScript（JS）*...
基于HTML5+CSS3的个人博客网站设计与实现.zip
02-12
CSS3还引入了动画和过渡效果，为网页增加了视觉吸引力。 在“基于HTML5+CSS3的个人博客网站设计与实现”项目中，开发者可能利用这些技术创建了一个具有现代感、交互性强的个人博客平台。HTML5的离线存储（Web ...
html中div缓慢入场样式
05-18
你可以使用CSS中的transition属性来实现div缓慢入场的效果。具体实现方法如下： 首先，在CSS中定义div的样式，例如： ```css div { opacity: 0; transform: translateY(20px); transition: all 0.3s ease-in-out; } ``` 上面的样式设置了div的透明度为0，同时将其向下平移20像素，并且设置了一个缓慢的过渡效果。 然后，在div的父元素中添加一个class，例如： ```html <div class="wrapper"> <div>这是一个div</div> </div> ``` 接下来，在CSS中定义wrapper的样式，例如： ```css .wrapper.show div { opacity: 1; transform: translateY(0); } ``` 上面的样式设置了当wrapper的class包含show时，div会平滑的过渡到完全显示状态。 最后，在JavaScript中添加一个事件监听器，例如： ```javascript const wrapper = document.querySelector('.wrapper'); wrapper.addEventListener('click', () => { wrapper.classList.toggle('show'); }); ``` 上面的代码添加了一个点击事件监听器，当wrapper被点击时，会添加或者移除show class，从而触发div的缓慢入场效果。 这样就完成了div缓慢入场的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值