纯css3弹窗特效
用css3写的一款蓝色渐变弹窗模板，点击按钮即可打开窗口特效。
改一下做引导单页还是挺帅的。
<!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.z6dg.com)记录生活点滴,代码特效等。让您的网络生活更简单精彩。 </p> <a href="#close" class="close"></a> </div> </div> </body> </html>
热门推荐
评论列表