div+css布局实现2个襁褓中的婴儿效果代码-html代码-BFW代码库

div+css布局实现2个襁褓中的婴儿效果代码

代码语言：html

代码描述：div+css布局实现2个襁褓中的婴儿效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body{
        	background:rgb(255,222,129);
        }
        img{
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:500px;
        }
        .container, .container2{
        	position:absolute;
        	top:50%;
        	left:calc(50% - 110px);
        	transform:translate(-50%,-50%);
        	height:300px;
        	width:300px;
        /* 	border:2px solid blue; */
        }
        .container2{
        	left:calc(50% + 110px);
        }
        .swaddle {
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:100%;
        	width:62%;
        /* 	border:2px solid red; */
        	border-radius:999px;
        	overflow:hidden;
        	box-shadow:15px 10px 0px rgba(0,0,0,0.1);
        }
        .swaddle.boy{
        	background:rgb(101,237,253);
        }
        .swaddle.girl{
        	background:rgb(253,101,237);
        }
        .sRight, .sLeft{
        	position:absolute;
        	top:85%;
        	left:80%;
        	transform:translate(-50%,-50%) rotate(-30deg);
        	width: 150%;
        	height:70%;
        /* 	border:2px solid green; */
        	
        }
        .sLeft{
        	left:20%;
        	transform:translate(-50%,-50%) rotate(30deg);
        }
        .sRight.boy{
        	background:rgb(156,244,254);
        }
        .sLeft.boy{
        	background:rgb(193,248,255);
        }
        .sRight.girl{
        	background:rgb(254,156,244);
        }
        .sLeft.girl{
        	background:rgb(254,193,248);
        }
        .head{
        	position:absolute;
        	top:27.5%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:44%;
        	width:74%;
        /* 	border:2px solid greenyellow; */
        	border-radius:100%;
        	background:rgb(255,208,188);
        }
        .hairL, .hairR, .hairM{
        	position:absolute;
        	top:11%;
        	left:50%;
        	transform:rotate(20deg) translate(-50%,-50%);
        	height:22%;
        	width:22%;
        	border-left:5px solid rgb(230,171,141);
        	border-radius:100px;
        }
        .hairL{
        	left:46%;
        	height:24%;
        	width:22%;
        }
        .hairR{
        	left:54%;
        	top:18%;
        	transform:rotate(36deg) translate(-50%,-50%);
        }
        .hairM{
        	transform:rotate(28deg) translate(-50%,-50%);
        	top:13%;
        	left:50%;
        	height:27%;
        	width:23%;
        }
        .earL, .earR{
        	position:absolute;
        	top:50%;
        	left:0%;
        	transform:translate(-50%,-50%);
        	height:12%;
        	width:12%;
        /* 	border:2px solid greenyellow; */
        	border-radius:1000px;
        	background:rgb(255,208,188);
        }
        .earR {
        	left:100%;
        }
        .eyeL, .eyeR{
        	position:absolute;
        	top:39%;
        	left:29%;
        	transform:translate(-50%,-50%);
        	height:7%;
        	width:7%;
        /* 	border:2px solid steelblue; */
        	border-radius:100%;
        	background:rgb(65,65,65);
        }
        .eyeR{
        	left:71%;
        }
        .nose{
        	position:absolute;
        	top:52%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	height:4%;
        /* 	border:2px solid steelblue; */
        	width:10%;
        	border-radius:1000px 1000px 0 0;
        	background:rgb(230,171,141);
        }
        .che.........完整代码请登录后点击上方下载按钮下载查看