纯CSS3弹出模态框特效

这是一款蓝色渐变背景静态自适应的模态框基于css3属性制作,点击按钮打开模态窗口特效。

纯CSS模态框特效

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS模态框特效</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*,::after,::before{box-sizing:border-box;margin:0;padding:0;}
html{font-size:62.5%;}
body{display:flex;min-height:100vh;background:linear-gradient(to bottom,#f7f7fc,#e8e9f7);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Open Sans',sans-serif;--light:hsl(0, 0%, 100%);--background:linear-gradient(to right bottom, hsl(236, 50%, 50%), hsl(195, 50%, 50%));flex-direction:column;justify-content:center;align-items:center;}
a,a:link{text-decoration:none;font-family:inherit;}
/* 盒子 */
.container{position:fixed;top:0;left:0;z-index:10;display:none;width:100%;height:100%;background:hsla(0,0%,40%,.6);justify-content:center;align-items:center;}
.container:target{display:flex;}
.box{position:relative;overflow:hidden;padding:4rem 2rem;width:60rem;border-radius:.8rem;background:var(--background);box-shadow:.4rem .4rem 2.4rem .2rem hsla(236,50%,50%,.3);color:var(--light);}
.details{margin-bottom:4rem;padding-bottom:4rem;border-bottom:1px solid hsla(0,0%,100%,.4);text-align:center;}
.title{font-size:3.2rem;}
.describe{margin-top:2rem;font-size:1.6rem;}
.content{margin-bottom:4rem;padding:0 4rem;font-size:1.6rem;line-height:2;}
.content::before{position:absolute;top:0;left:100%;width:18rem;height:18rem;border:1px solid hsla(0,0%,100%,.2);border-radius:100rem;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;}
/* 窗口 */
.window{padding:1.4rem 3.2rem;border-radius:100rem;background:var(--background);box-shadow:.4rem .4rem 2.4rem .2rem hsla(236,50%,50%,.3);color:var(--light);font-size:1.8rem;transition:.2s;}
.window:focus,.window:hover{box-shadow:0 0 4.4rem .2rem hsla(236,50%,50%,.4);-webkit-transform:translateY(-.2rem);transform:translateY(-.2rem);}
.close{position:absolute;top:2rem;right:2rem;display:flex;width:4rem;height:4rem;border:1px solid hsla(0,0%,100%,.4);border-radius:100rem;color:inherit;font-size:2.2rem;transition:.2s;justify-content:center;align-items:center;}
.close::before{content:'×';-webkit-transform:translateY(-.1rem);transform:translateY(-.1rem);}
.close:focus,.close:hover{border-color:hsla(0,0%,100%,.6);-webkit-transform:translateY(-.2rem);transform:translateY(-.2rem);}
</style>
</head>
<body>
<a href="#opened" class="window" id="close">打开窗口</a>
<div class="container" id="opened">
	<div class="box">
		<div class="details">
			<h1 class="title">优梦云</h1>
			<p class="describe">御风而行,踏破天穹</p>
		</div>
		<p class="content">
			优梦云(umqun.com)记录生活点滴,代码特效等。让您的网络生活更简单精彩。
		</p>
		<a href="#close" class="close"></a>
	</div>
</div>
</body>
</html>
1 条回复A管理员Y会员M游客