首页手记两个半小时的成果，实现了一个哆啦A梦。

两个半小时的成果，实现了一个哆啦A梦。

标签：

Html/CSS Html5 CSS3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多啦A梦</title>
<link rel="stylesheet" type="text/css" href="css/多啦a梦.css"/>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="ld">
<div class="hz1"></div>
<div class="hz2"></div>
<div class="hz3"></div>
<div class="hz4"></div>
<div class="hz5"></div>
<div class="hz6"></div>
</div>
<div class="zyj">
<div class="zy"></div>
</div>
<div class="yyj">
<div class="yy"></div>
</div>
<div class="bz"></div>
<div class="zb"></div>
<div class="fz"></div>
<div class="sx"></div>
<div class="xq"></div>
<div class="ldd">
<div class="huan">

            </div>
            <div class="hd">

            </div>
            <div class="hx">

            </div>
        </div>
        <div class="xbs">
            <div class="dz">
                <div class="dd">

                </div>
            </div>
            <div class="zgb">
                <div class="zqt">

                </div>
            </div>
            <div class="ygb">
                <div class="yqt">

                </div>
            </div>
            <div class="by">

            </div>
            <div class="ffz">

            </div>
            <div class="zj">

            </div>
            <div class="yj">

            </div>
        </div>
    </div>
</body>

</html>

*{margin: 0;padding: 0;}

.container{
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
animation: xuanzhuan 1s linear infinite;
transform: perspective(1000px) rotateY(45deg);
}
@keyframes xuanzhuan{
0% {
transform: scale(1)rotate3d(0,1,0,90deg);
/transform: scale(0);/
}
100% {
transform: scale(1)rotate3d(0,1,0,360deg);
/transform: scale(1.5);/
}
}
.header{
width: 300px;
height: 300px;
border-radius: 300px;
background: #0099CC;
border: 2px solid #333;
box-shadow: 2px 2px 20px #599fd2;
}
.xq{
width: 210px;
height: 16px;
border: 2px solid #333;
background: -webkit-linear-gradient(#ba3844,#7e2541);
border-radius:6px;
position: absolute;
top: 260px;
left: 46px;
z-index: 10;
}
.ld{
width: 270px;
height: 250px;
background: #fff;
position: absolute;
border-radius: 120px 120px 130px 130px;
top: 52px;
left: 18px;
border: 2px solid #333;
}
.ld div{
width: 80px;
height: 2px;
background: #333;
position: absolute;
z-index: 2;
}
.hz1{
transform:rotate(15deg);
top: 80px;
left: 20px;
}
.hz2{
transform:rotate(0deg);
top: 100px;
left: 20px;
}
.hz3{
transform:rotate(-15deg);
top: 120px;
left: 20px;
}
.hz4{
transform:rotate(-15deg);
top: 80px;
left: 160px;
}
.hz5{
transform:rotate(0deg);
top: 100px;
left: 160px;
}
.hz6{
transform:rotate(15deg);
top: 120px;
left: 160px;
}
.zyj{
height: 65px;
width: 50px;
position: absolute;
border: 2px solid #333;
border-radius: 50% 50% 50% 50% / 50% 50% 25% 35%;
top: 30px;
left: 12%;
background: #fff;
/position: relative;/

}
.yyj{
height: 65px;
width: 50px;
position: absolute;
border: 2px solid #333;
border-radius: 50% 50% 50% 50% / 50% 50% 35% 25%;
top: 30px;
left: 18.5%;
background: #fff;
/position: relative;/
}
.zy{
width: 14px;
height: 17px;
background: -webkit-radial-gradient(#ccc,#000);
border-radius: 10px;
left: 25px;
top: 25px;
position: absolute;
}
.yy{
width: 12px;
height: 15px;
background: -webkit-radial-gradient(#ccc,#000);
border-radius: 10px;
left: 5px;
top: 25px;
position: absolute;
}
.bz{
width: 40px;
height: 40px;
border: 2px solid #333;
border-radius: 40px;
background: -webkit-radial-gradient(#a54257,#7d2e43);
position: absolute;
left: 128px;
top: 86px;
}

.zb{
width: 160px;
height: 140px;
border-radius: 70px;
border-bottom:3px solid #333;
position: absolute;
left: 70px;
top: 90px;
}
.fz{
position: absolute;
width: 160px;
height: 30px;
background: #fff;
top: 160px;
left: 70px;
}
.sx{
height: 100px;
width: 3px;
background: #222;
position: absolute;
top: 130px;
left: 18.5%;
z-index: 2;
}
.ldd{
position: absolute;
width: 45px;
height: 45px;
border-radius: 50px;
background: -webkit-radial-gradient(#f3fb1b,#c5b16a);
left: 125px;
top: 44%;
box-shadow: -3px 2px 10px #666;
border: 2px solid #333;
z-index: 10;
}
.ldd .huan{
width: 40px;
height: 3px;
border: 2px solid #666;
border-radius: 20px 20px 3px 3px;
position: absolute;
top: 9px;
}
.ldd .hd{
width: 15px;
height: 15px;
background: #111;
border-radius: 7px;
left: 32%;
top: 40%;
position: absolute;
}
.ldd .hx{
height: 15px;
width: 3px;
background: #000;
position: absolute;
left: 45%;
bottom: 0;
}
.xbs{
width: 210px;
height: 180px;
background: #0099CC;
position: absolute;
left: 46px;
top: 278px;
border: 2px solid #333;
z-index: 3;
box-shadow: 2px 2px 20px #0099CC;
}
.dz{
width: 170px;
height: 160px;
border-radius: 100px;
background: #fff;
position: absolute;
border: 2px solid #333;
left: 18px;
top: -20px;
z-index: 3;
}
.dd{
width: 140px;
height: 70px;
position: absolute;
border: 2px solid #333;
border-radius: 0 0 100px 100px;
top: 80px;
left: 14px;
z-index: 4;
}
.zgb{
width: 80px;
height: 45px;
background: #0099CC;
position: absolute;
left: -52px;
top: 22px;
transform:rotate(-45deg);
border-top:2px solid #333;
border-bottom: 2px solid #333;
z-index: 1;
box-shadow: 2px 2px 10px #0099CC;
}
.zqt{
width: 60px;
height: 60px;
position: absolute;
border: 2px solid #333;
border-radius: 40px;
background: #fff;
top: -12px;
left: -50px;
box-shadow: 2px 2px 10px #0099CC;
}
.ygb{
width: 80px;
height: 45px;
background: #0099CC;
position: absolute;
left: 182px;
top: 22px;
transform:rotate(45deg);
border-top:2px solid #333;
border-bottom: 2px solid #333;
z-index: 1;
box-shadow: 2px 2px 10px #0099CC;
}
.yqt{
width: 60px;
height: 60px;
position: absolute;
border: 2px solid #333;
border-radius: 40px;
background: #fff;
top: -10px;
left: 67px;
box-shadow: 2px 2px 10px #0099CC;
}
.by{
width: 20px;
height: 10px;
background: #ccc;
position: absolute;
bottom: -2px;
left: 45%;
border-radius: 20px 20px 0 0;
border:2px solid #333;
}
.ffz{
width: 20px;
height: 2px;
background: #ccc;
position: absolute;
bottom: -2px;
left: 46%;
}
.zj{
width: 114px;
height: 30px;
border: 2px solid #333;
position: absolute;
bottom: -34px;
background: #fff;
left: -15px;
border-radius: 26px 16px 10px 10px;
box-shadow: 2px 2px 10px #666;
}
.yj{
width: 114px;
height: 30px;
border: 2px solid #333;
position: absolute;
bottom: -34px;
background: #fff;
left: 114px;
border-radius: 10px 26px 10px 16px;
box-shadow: 2px 2px 10px #666;
}