css布局实现一个络腮胡帽子人物头像效果代码-html代码-BFW代码库

css布局实现一个络腮胡帽子人物头像效果代码

代码语言：html

代码描述：css布局实现一个络腮胡帽子人物头像效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@keyframes cigar {
  0%, 35%, 100% {
    background-color: #80313a;
    border-color: #302e2e;
  }
  60%, 75% {
    background-color: #f83f11;
    border-color: #a31010;
  }
  90% {
    background-color: #8a1a03;
    border-color: #3a2a2a;
  }
}
@keyframes cherry {
  0%, 55% {
    top: var(--cherry-initial-position);
    opacity: 0;
  }
  65% {
    top: var(--cherry-initial-position);
    opacity: 0.8;
  }
  70%, 100% {
    top: var(--cherry-final-position);
    opacity: 0;
  }
}
:root {
  background-color: #ffe9bf;
}
:root body {
  position: relative;
}
:root * {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
}
:root *:before, :root *:after {
  position: absolute;
  box-sizing: border-box;
  content: "";
}
:root #clint {
  left: 50%;
  width: 120vmin;
  height: 100vmin;
  transform: translate(-50%, 0);
}
:root #clint .hat {
  top: 10%;
  left: 50%;
  width: 72%;
  he.........完整代码请登录后点击上方下载按钮下载查看