纯css布局实现超级玛丽-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现超级玛丽

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');

body {
  background-color: #fbce00;
}
.container {
  margin:auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100vw;
  height:100vh;
}

.circle {
  background-color: #139334;
  width: 500px; 
  height: 500px;
  border-radius: 50%;
  position: absolute; 
  top: 20px;
  left: 212px;
  z-index:-2;    
  
}

.head {
  background-color: #ffc587;
  height: 320px;
  width: 305px;
  border-radius: 130px;
  position: absolute;
  top: 150px;
  left: 310px;
}


.hat { 
  background-color: #d80506;
  width:300px;
  height:300px;
  border-radius: 85px 200px 85px 250px;
  box-shadow: inset 0 5px 10px white;
  transform:rotate(-45deg);
  position: absolute; 
  top: 25px;
  left: 320px;
  z-index: -2;
}

.logo { 
  background-color: white;
  height: 80px; 
  width:80px; 
  border-radius: 50%; 
  box-shadow: inset 0 5px 10px #e0e0e0;
  position: absolute; 
  top: 70px;
  left: 425px;
}

.m-logo {
  font-family: 'Carter One', cursive;
  font-size: 50px;
  color: red;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  text-align: center;
  padding-top: 5%;
}

.hat1 {
  width: 220px;
  height: 45px; 
  background-color: #9b1006;
  box-shadow: inset 0 5px 15px #f72028;
  -webkit-border-radius: 50% 50% 50% 50% / 80% 80% 30% 30%;
  position: absolute;
  top: 145px;
  left: 355px;  
}

.left-eyebrow {
      width: 85px;
      height: 95px;
      border-radius: 50%;
      box-shadow: 20px 20px 0 0 #3f2a14;
  transform: rotate(-125deg);
  position: absolute; 
  top: 205px;
  left: 469px;
}

.right-eyebrow {
      width: 85px;
      height: 95px;
      border-radius: 50%;
      box-shadow: 20px 20px 0 0 #3f2a14;
  transform: rotate(-135deg);
  position: absolute; 
  top: 205px;
  left: 360px;
}

.left-eye { 
 background-color: white;
  width: 60px; 
  height: 100px; 
  border-radius: 50%;
  position: absolute; 
  top: 240px; 
  left: 380px;
}

.left-iris { 
  background-image: radial-gradient( white, #0c7ed2, #0b489f );
  width: 50px;
  height: 80px;
  border-radius: 50%;
  position: absolute; 
  top: 255px;
  left: 390px;
}

.innereye1 { 
  background-color: black; 
  width: 33px; 
  height: 50px; 
  border-radius: 50%; 
  position: absolute; 
  top: 274px;
  left: 400px;
}

.highlight1 { 
  background-color: white; 
  width: 10px; 
  height: 15px; 
  border-radius: 50%; 
  position: absolute; 
  top: 280px; 
  left: 413px;
}

.right-eye { 
 background-color: white;
  width: 60px; 
  height: 100px; 
  border-radius: 50%;
  position: absolute; 
  top: 240px; 
  left: 480px;
}

.right-iris { 
  background-image: radial-gradient(white, #0c7ed2, #0b489f );
  width: 50px;
  height: 80px;
  border-radius: 50%;
  position: absolute; 
  top: 255px;
  left: 480px;
}

.innereye2 { 
  background-color: black; 
  width: 33px; 
  height: 50px; 
  border-radius: 50%; 
  position: absolute; 
  top: 274px;
  left: 485px;
}

.highlight2 { 
  background-color: white; 
  width: 10px; 
  height: 15px; 
  border-radius: 50%; 
  position: absolute; 
  top: 280px; 
  left: 495px;
}

.nose { 
  background-color: #ffcf87; 
  width: 120px;
  height: 70px; 
  border-radius: 50%;
  box-shadow: inset 10px 0 20px #ffd987;
  position: absolute;
  top: 320px;
  left: 400px;
}

.mustache1 {
  height:30px;
  width:65px;
  border-radius: 0 0 90px 90px;
  background: #3f2a14;
  position: absolute; 
  top: 365px;
  left: 360px;
  transform: rotate(15deg);
}

.mustache2 {
  height:35px;
  width:70px;
  border-radius: 0 0 90px 90px;
  background: #3f2a14;
  position: absolute; 
  top: 372px;
  left: 405px;
  transform: rotate(05deg);
}

.mustache3 {
  height:35px;
  width:70px;
  border-radius: 0 0 90px 90px;
  background: #3f2a14;
  position: absolute; 
  top: 375px;
  left: 455px;
  transform: rotate(01deg);
}

.mustache4 {
  height:30px;
  width:65px;
  border-radius: 0 0 90px 90px;
  background: #3f2a14;
  position: absolute; 
  top: 371px;
  left: 497px;
  .........完整代码请登录后点击上方下载按钮下载查看