css布局实现女版洛基效果代码-html代码-BFW代码库

css布局实现女版洛基效果代码

代码语言：html

代码描述：css布局实现女版洛基效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body{
  margin:0;
  padding:0;
  background:#fefcd5;
  
}

.container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.face{
  display:flex;
  position:absolute;
  justify-content:center;
  height:300px;
  width:300px;
  border-radius:80% 80% 100% 100%;
  background:#f8ddd6;
}

.hair{
  position:absolute;
  width:300px;
  height:100px;
  background:#181616;
  z-index:1;
  border-radius:100% 100% 0% 0%;
}

.crown-pt1{
  top:55px;
  right:-27px;
  position:absolute;
  height:75px;
  width:185px;
  background:#f1ec8f;
  z-index:1;
  transform: rotate(-10deg);
  
}
.crown-pt2{
  position:absolute;
  left:-27px;
  top:55px;
  height:75px;
  width:185px;
  background:#f1ec8f;
  z-index:1;
  transform: rotate(10deg);

}
.crown-pt3{
  top:105px;
  left:-15px;
  position:absolute;
  height:140px;
  width:45px;
  background:#f1ec8f;
  z-index:1;
  transform: rotate(-15deg);
}

.crown-pt4{
  top:105px;
  right:-15px;
  position:absolute;
  height:140px;
  width:45px;
  b.........完整代码请登录后点击上方下载按钮下载查看