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%.........完整代码请登录后点击上方下载按钮下载查看