纯css实现自适应模态弹出框弹出层效果代码-html代码-BFW代码库

纯css实现自适应模态弹出框弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：纯css实现自适应模态弹出框弹出层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS Modal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        /* defaults *//* =============================================== */*,*::after,*::before {
    	margin:0;
    	padding:0;
    	box-sizing:border-box;
    }
    html {
    	font-size:62.5%;
    }
    body {
    	--light:hsl(0,0%,100%);
    	--background:linear-gradient(to right bottom,hsl(236,50%,50%),hsl(195,50%,50%));
    	display:flex;
    	flex-direction:column;
    	justify-content:center;
    	align-items:center;
    	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Open Sans',sans-serif;
    	min-height:100vh;
    	background:linear-gradient(to bottom,hsl(236,50%,98%),hsl(236,50%,94%));
    }
    a,a:link {
    	font-family:inherit;
    	text-decoration:none;
    }
    /* modal *//* =============================================== */.modal-container {
    	position:fixed;
    	top:0;
    	left:0;
    	z-index:10;
    	display:none;
    	justify-content:center;
    	align-items:center;
    	width:100%;
    	height:100%;
    	background:hsla(0,0%,40%,.6);
    }
    /* using:target */.modal-container:target {
    	display:flex;
    }
    .modal {
    	width:60rem;
    	padding:4rem 2rem;
    	border-radius:.8rem;
    	color:var(--light);
    	background:var(--background);
    	box-shadow:.4rem .4rem 2.4rem .2rem hsla(236,50%,50%,0.3);
    	position:relative;
    	overflow:hidden;
    }
    .modal__details {
    	text-align:center;
    	margin-bottom:4rem;
    	padding-bottom:4rem;
    	border-bottom:1px solid hsla(0,0%,100%,.4);
    }
    .modal__title {
    	font-size:3.2rem;
    }
    .modal__description {
    	margin-top:2rem;
    	font-size:1.6rem;
    	font-style:italic;
    }
    .modal__text {
    	padding:0 4rem;
    	margin-bottom:4rem;
    	font-size:1.6rem;
    	line-height:2;
    }
    .modal__text::before {
    	content:'';
    	position:absolute;
    	top:0%;
    	left:100%;
    	-webkit-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    	width:18rem;
    	height:18rem;
    	border:1px solid hsla(0,0%,100%,.2);
    	border-radius:100rem;
    	pointer-events:none;
    }
    .modal__btn {
 .........完整代码请登录后点击上方下载按钮下载查看