<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>汉克狗案例</title>
<style type="text/css">
:root{
--hl:#1b2f90;
--bg:#f9f9f6;
--t:2s;
}
body{
background: #ffc400;
}
.dog{
width: 300px;
height:400px;
position: relative;
}
.center{
position:absolute;
left: 50%;
transform: translate(-50%,0);
z-index: 1;
}
.forehead{
width: 102px;
height: 48px;
background: var(--bg);
/*margin-left:-51px;*/
border-radius: 51px/40px 40px 8px 8px;
}
.face{
width: 110px;
height:68px;
top: 20px;
background: var(--bg);
border-radius: 50px;
}
.chin{
width: 104px;
height:36px;
top: 60px;
background: var(--bg);
border-radius:52px/0 0 36px 36px;
}
.ear{
width: 16px;
height:70px;
background: var(--hl);
border-radius:50%;
position:absolute;
left: 50%;
top: 34px;
transform: translate(-42px,0) rotate(10deg);
transform-origin: 50% 0;
z-index: 0;
animation:rotate var(--t) ease-out infinite;
}
.ear.right{
transform:scale(-1,1) translate(-26px,0) rotate(10deg);
animation:rotate-r var(--t) ease-out infinite;
}
.eye{
width: 24px;
height:24px;
background: var(--bg);
border-radius:12px/13px 12px 12px 0;
position:absolute;
z-index:2;
left: 50%;
top:20px;
transform: translate(-40px,0) rotate(10deg);
transform-origin: 50% 0;
box-shadow: 1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd;
z-index:2;
overflow:hidden;
}
.eye.right{
transform:scale(-1,1) translate(-17px,0) rotate(10deg);
box-shadow: 1px 0 0 0 #000 inset;
}
.birthmark{
width: 30px;
height:36px;
background: var(--hl);
border-radius:15px/17px 23px 2px 13px;
position:absolute;
z-index:1;
left: 50%;
top: 10px;
transform:translate(14px,0) rotate(-10deg);
}
.eye .eyeball{
width: 26px;
height:26px;
background: #e79101;
border-radius:50%;
position:absolute;
left: 3px;
top: 1px;
box-shadow: 0 0 8px 0 #000 inset;
animation:translate var(--t) ease-out infinite;
}
.eyeball::before {
width: 18px;
height:18px;
border-radius:50%;
background:#000;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
content: '';
}
.eyeball::after {
width: 5px;
height:5px;
border-radius:50%;
background:#fff;
position:absolute;
left: 7px;
top: 9px;
transform: translate(-50%,-50%);
content: '';
}
.nose{
width:62px;
height: 32px;
top: 42px;
background:#363035;
z-index:3;
border-radius:50%/10px 10px 22px 22px;
}
.nose:before{
content:'';
width:60px;
height:10px;
position:absolute;
left: 50%;
top: 1px;
transform: translate(-50%,0);
border-radius:50%/8px 8px 2px 2px;
background:linear-gradient(10deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
}
.nostril{
width:15px;
height: 4px;
top: 22px;
background:linear-gradient(0deg,#363035 0%,#000 100%);
z-index:2;
border-radius:50%/10px 10px 22px 22px;
position:absolute;
left: 50%;
transform: translate(-21px,0) rotate(30deg);
animation:resizes var(--t) ease-out infinite;
}
.nostril.right{
transform:scale(-1,1) translate(-7px,0) rotate(30deg);
}
.mouth{
width:68px;
height: 25px;
top: 70px;
background:#671316;
z-index:2;
border-radius:50%/0px 0px 27px 27px;
box-shadow: 0 0 4px 0 #000 inset;
animation:open var(--t) ease-out infinite;
}
.mouth:before{
background: var(--bg);
width: 68px;
height: 8px;
border-radius:50%/0 0 5px 5px;
content: '';
position:absolute;
top: 0;
left: 0;
z-index:2;
}
.teen{
width: 8px;
height: 3px;
background:#fff;
border-radius:50%/0 0 0px 1px;
position:absolute;
top: 7px;
left: 50%;
transform:translate(-100%,0);
z-index:1;
}
.teen.right{
transform:scale(-1,1) translate(0,0);
border-right: .5px solid #ddd;
z-index:1;
}
.tongue{
width:34px;
height: 14px;
top: 0px;
background:#a2504f;
z-index:0;
border-radius:50%/0px 0px 7px 7px;
box-shadow: 0 0 4px 0 #111 inset;
animation:extend var(--t) ease-out infinite;
}
.body{
width:66px;
height:70px;
background:var(--bg);
top: 89px;
border-radius:50%;
}
.arm{
width:26px;
height:40px;
background:var(--bg);
position:absolute;
top: 5px;
left: 50%;
border-radius:50%/20px 0 0 20px;
transform:translate(-43px,0) rotate(21deg);
}
.arm:before{
content:'';
width: 5px;
height: 20px;
border-radius:50%/10px 0 0 10px;
right: 7px;
top: 14px;
position:absolute;
transform:rotate(-5deg);
box-shadow: -1px 0 0 0 rgba(200,200,200,.5)
}
.arm.right{
transform: scale(-1,1) translate(-17px,0) rotate(21deg);
}
.leg{
width:29px;
height:50px;
background:linear-gradient(-90deg,#eee 0%,#fff 20%,#fff 100%);
position:absolute;
top: 40px;
left: 50%;
border-radius:50%/5px 5px 15px 45px;
transform:translate(-33px,0);
}
.leg.right{
transform: scale(-1,1) translate(-3px,0);
}
.foot{
width: 29px;
height: 15px;
background:linear-gradient(-120deg,#bbb 0%, #eee 20%,#fff 20%,#fff 100%);
position:absolute;
bottom: -29px;
left: 2px;
border-radius:50%/10px 10px 5px 5px;
}
.foot.right{
transform: scale(-1,1) translate(-33px,0);
}
.belly{
width: 60px;
height: 36px;
z-index: 2;
background:linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);
border-radius:50%/0px 0px 36px 36px;
top: 34px;
}
@keyframes rotate{
0%{transform: translate(-42px,0) rotate(10deg);}
50%{transform: translate(-42px,0) rotate(30deg);}
100%{transform: translate(-42px,0) rotate(10deg);}
}
@keyframes rotate-r{
0%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
50%{transform:scale(-1,1) translate(-26px,0) rotate(30deg);}
100%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
}
@keyframes translate{
0%{left: 3px;}
50%{left: 6px;}
100%{left: 3px;}
}
@keyframes resizes{
0%{height: 4px;}
50%{height: 3px;}
100%{height: 4px;}
}
@keyframes extend{
0%{height: 14px;}
50%{height: 23px;}
100%{height: 14px;}
}
@keyframes open{
0%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
50%{height: 18px;border-radius:50%/0px 0px 20px 20px;}
100%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
}
</style>
</head>
<body>
<div class="dog center">
<div class="forehead center"></div> <!-- 额头 -->
<div class="face center"></div> <!-- 脸颊 -->
<div class="chin center"></div> <!-- 下巴 -->
<div class="ear"></div> <!-- 左耳朵 -->
<div class="ear right"></div> <!-- 右耳朵 -->
<div class="birthmark"></div>
<div class="eye">
<div class="eyeball"></div>
</div> <!-- 左眼 -->
<div class="eye right">
<div class="eyeball right"></div>
</div> <!-- 右眼 -->
<div class="nose center"> <!-- 鼻子 -->
<div class="nostril"></div> <!-- 左鼻孔 -->
<div class="nostril right"></div><!-- 右鼻孔 -->
</div>
<div class="mouth center"><!-- 嘴巴 -->
<div class="teen"></div><!-- 左牙齿 -->
<div class="teen right"></div><!-- 右牙齿 -->
<div class="tongue center"></div><!-- 舌头 -->
</div>
<div class="body center"><!-- 身体 -->
<div class="arm"></div><!-- 左手臂 -->
<div class="arm right"></div><!-- 右手臂 -->
<div class="leg"></div><!-- 左脚 -->
<div class="leg right"></div><!-- 右脚 -->
<div class="foot"></div><!-- 左脚掌 -->
<div class="foot right"></div><!-- 右脚掌 -->
<div class="belly center"></div>
</div>
</div>
</body>
</html>
实现效果图：