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%;
height: 34%;
transform: translate(-50%, 0);
}
:root #clint .hat .crown {
left: 26%;
width: 24%;
height: 80%;
background-color: #5f2740;
border-top-left-radius: 80% 22%;
}
:root #clint .hat .crown + .crown {
transform: scaleX(-1);
background-color: #82434b;
right: 26%;
left: unset;
}
:root #clint .hat .crown + .crown:before {
background-color: #9f8e94;
}
:root #clint .hat .crown:before {
bottom: 0;
width: 100%;
height: 25%;
background-color: #7f5f6a;
}
:root #clint .hat .brim {
bottom: 4%;
left: 0;
width: 50%;
height: 25%;
background-color: #5f2740;
border-radius: 50% 0 0 50%;
transform: skewY(7deg);
}
:root #clint .hat .brim + .brim {
bottom: 2%;
left: 50%;
background-color: #82434b;
border-radius: 0 120% 100% 0;
transform: skewY(-5deg);
}
:root #clint .hat .brim + .brim .inside {
top: 31%;
left: 0;
width: 58%;
height: 46%;
border-radius: 0 120% 100% 0;
}
:root #clint .hat .brim .inside {
top: 40%;
right: 0;
width: 65%;
height: 50%;
background-color: #481e32;
bor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0