单个div布局实现一个骷颅效果代码-html代码-BFW代码库

单个div布局实现一个骷颅效果代码

代码语言：html

代码描述：单个div布局实现一个骷颅效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
  background-color: grey;
  min-height: 100vh;
  display: flex;
  align-items:center;
  justify-content: center;
}

div {
  --forehead: radial-gradient(#000 50%, transparent 50%) -53px -48px / 351px 355px;
  --hide-forehead:linear-gradient(grey, grey) 0 174px / 245px 81px;
  position: relative;
  width: 245px;
  height: 335px;
  background: 
  var(--hide-forehead),
  var(--forehead);
  background-repeat: no-repeat;
}

div::before {
  --left-eye: radial-gradient(#fff 50%, transparent 50%) 21px 0px / 70px 70px;
  --right-eye: radial-gradient(#fff 50%, transparent 50%) 154px 0px / 70px 70px;
  --right-nose: linear-gradient(65deg, #fff 50%, transparent 19%) 124px 63px / 20px 40px;
  --left-nose: linear-gradient(-65deg, #fff 50%, transparent 19%) 100px 63px / 20px 40px;
  --face: linear-gradient( #000, #000 ) 0px 0px / 245px 130px;
  content: '';
  width: 245px;
  height: 130px;
  border-bottom-right-radius: 70%;
  border-bottom-left-radius: 70%;
  position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看