css布局实现泡泡404页面效果代码-html代码-BFW代码库

css布局实现泡泡404页面效果代码

代码语言：html

代码描述：css布局实现泡泡404页面效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    a{
        color: white;
    }
        html,body{height:100vh;}html:before,html:after,body:before,body:after{content:'';background:linear-gradient(#203075,#233581);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}html:before,body:before{background:linear-gradient(#233581,#203075);}html{background:linear-gradient(#203075,#233581);overflow:hidden;}html:before{height:105vmax;width:105vmax;z-index:-4;}html:after{height:80vmax;width:80vmax;z-index:-3;}body{display:flex;justify-content:center;align-items:center;color:#FFF;font-family:'Varela Round',Sans-serif;text-shadow:0 30px 10px rgba(0,0,0,0.15);}body:before{height:60vmax;width:60vmax;z-index:-2;}body:after{height:40vmax;width:40vmax;z-index:-1;}.main{text-align:center;z-index:5;}p{font-size:18px;margin-top:0;}h1{font-size:95px;margin:0;}button{background:linear-gradient(#EC5DC1,#D61A6F);padding:0 12px;border:none;border-radius:20px;box-shadow:0 30px 15px rgba(0,0,0,0.15);outline:none;color:#FFF;font:400 16px/2.5 Nunito,'Varela Round',Sans-serif;text-transform:uppercase;cursor:pointer;}.bubble{background:linear-gradient(#EC5DC1,#D61A6F);border-radius:50%;box-shadow:0 30px 15px rgba(0,0,0,0.15);position:absolute;}.bubble:before,.bubble:after{content:'';b.........完整代码请登录后点击上方下载按钮下载查看