纯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