纯css实现自适应人脸效果

代码语言:html

所属分类:布局界面

代码描述:纯css实现自适应人脸效果

代码标签: 适应 人脸 效果

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

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

<style>
body {
  background-color: #c33;
}

.frame {
  background-color: #b22;
  border: solid 5vmin #fc0;
  border-radius: 50%;
  box-shadow: 0 5vmin #a11 inset, 0 2vmin #a11;
  box-sizing: border-box;
  height: 80vmin;
  margin: 10vmin auto;
  overflow: hidden;
  position: relative;
  width: 80vmin;
}

.person .body {
  background-color: #09f;
  border-radius: 50%;
  bottom: -5vmin;
  height: 20vmin;
  position: absolute;
  width: 80vmin;
}
.person .neck {
  background-color: #b88;
  border-radius: 0 0 50% 50%;
  bottom: 3vmin;
  box-sizing: border-box;
  height: 15vmin;
  left: 22.5vmin;
  position: absolute;
  width: 25vmin;
}
.person .head {
  background-color: #c99;
  border-radius: 50%;
  height: 50vmin;
  margin: 10vmin 17.5vmin;
  position: relative;
  width: 35vmin;
}
.person .head .ear {
  background-color: #b88;
  border: soli.........完整代码请登录后点击上方下载按钮下载查看

网友评论0