纯css布局实现超级玛丽
代码语言: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;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0