正文

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

007X8olVly1g7ky07hqlzj30nm0cpjtl.jpg

完整代码

<!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">
			枫叶博客(www.fyblog.cn)记录生活点滴,代码特效等。让您的网络生活更简单精彩。		</p>
		<a href="#close" class="close"></a>
	</div></div></body></html>


文章版权声明:除非注明,否则均为枫叶博客原创文章,转载或复制请以超链接形式并注明出处。
-- 展开阅读全文 --