前言：

掘友们，大家好啊。身为前端开发工程师的我，今天闲来无事，简单的写了一个html，这个不是一个简单的html啊，是爱心柯基狗，哈哈哈哈，大家可以下载下来发给你的女朋友哦！

接下来，请大家观看示例

示例：

代码实现：

这里小编时使用纯css实现的，添加了动画和伪类，废话不多说，大家看代码。

HTML

<div id="jojo">
   <div class="back-paws"></div>
   <div class="head"></div>
   <div class="face"></div>  
   <div class="ears"></div>
   <div class="body"></div>
   <div class="paws"></div>  
   <div class="fur"></div>
   <div class="heart"></div>
</div>

CSS

小编在代码实现过程中，也是不断的调试，给标签设置不同的属性，旋转，动画，伪类控制，等等等...。实现过程并不难，但就是要细心。

  body {
  background-color:#8C5A47;
  text-align:center;  
  height: 100%; 
  margin: 0px;
}
#jojo{  
  margin: 14px auto;
  position: relative;
  height:510px;
  width:680px;
}
#jojo div{position:absolute;}
#jojo div::before, #jojo div::after {
  content:'';
  position:absolute;
  display:block;
}
.head {
  width:155px;
  height:278px;
  background-image: linear-gradient(90deg, white 25px,  #F19D2C 25px);
  border-bottom-right-radius:135px;
  top:117px;
  right:199px;
}
.head::before {
  width: 54px;
  height:54px;
  border-bottom-right-radius:54px;
  background-image: radial-gradient(circle at 60px 0px, #404041 30px, white 30px);  
  top:46px;
  left:154px;
}
.head::after{
  width:64px;
  height:2px;
  background-color:#8C5A47;
  top:100px;
  left:91px;
}
.face{
  width:12px;
  height:12px;
  border-radius:50%;
  background-color:#404041;
  box-shadow: 48px 0 #404041;
  top:155px;
  left:387px;
}
.face::before{
  width:20px;
  height:10px;
  border-radius:10px;
  background-color:#D1733A;
  box-shadow:43px 0 #D1733A;
  top:-14px;
  left:-3px;
}
.face::after{
  width:22px;
  height:23px;
  background-color:#F16258;
  border-radius: 0 0 23px 23px;
  top:64px;
  left:30px;
  animation:tounge 1s infinite ease;
  -o-animation:tounge 1s infinite ease;
  -ms-animation:tounge 1s infinite ease;
  -moz-animation:tounge 1s infinite ease;
  -webkit-animation:tounge 1s infinite ease;
}
@keyframes tounge {
  50% {height:18px;}
}
.back-paws{
  width:507px;
  height:18px;
  background-color:#3F3856;
  border-radius:50%;
  bottom:50px;
  left:22px;
}
.back-paws::before{
  width:53px;
  height:106px;
  border-radius:60px;
  background-image: linear-gradient(#D1733A 80px, #D9DFF1 80px);
  left:120px;
  bottom:13px;
}
.back-paws::after{
  width:53px;
  height:106px;
  border-radius:60px;
  background-image: linear-gradient(#D1733A 80px, #D9DFF1 80px);
  left:350px;
  bottom:13px;
}
.body{
  width:277px;
  height:156px;
  border-bottom-left-radius:132px;
  background-image: linear-gradient(#F19D2C 130px, #D1733A 130px);
  bottom:115px;
  left:49px;
}
.body::before{
  width:50px;
  height:22px;
  background-image:linear-gradient( 90deg, white 22px, #F19D2C 22px);
  border-bottom-left-radius:22px;
  left:-26px;
  animation: tail 300ms infinite ease;
  -o-animation: tail 300ms infinite ease;
  -ms-animation: tail 300ms infinite ease;
  -moz-animation: tail 300ms infinite ease;
  -webkit-animation: tail 300ms infinite ease;
}
@keyframes tail{
  50%{transform:rotate(15deg);}
}
.paws{
  width:53px;
  height:106px;
  border-radius:60px;
  background-image: linear-gradient(#F19D2C 80px, white 80px);
  left:100px;
  bottom:62px;
}
.paws::after{
  width:53px;
  height:106px;
  border-radius:60px;
  background-image: linear-gradient(#F19D2C 80px, white 80px);
  left: 226px;
}
.ears::before{
  width:38px;
  height:38px;
  background-color:#c97c47;
  border-top-right-radius: 58px;
  box-shadow: 0px -8px 0 8px #F19D2C; 
  left:334px;
  top:80px;
}
.ears::after{
   width:38px;
  height:38px;
  background-color:#c97c47;
  border-top-left-radius: 58px;
  box-shadow: 0px -8px 0 8px #F19D2C;
  left:435px;
  top:80px;
}
.heart{
  width: 88px;
  height: 88px;
  border-radius: 88px 88px 88px 0;
  background-color:white;
  right:27px;
  top:70px;
}
.heart::before{
  width: 30px;
  height: 30px; 
  background-color:#F16258;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top:30px;
  left:30px;
}
.heart::after{
  width: 30px;
  height: 30px; 
  background-color:#F16258;
  top:19px;
  left:19px;
  border-radius:30px;
  box-shadow: 15px 15px #F16258;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.fur{
  width:40px;
  height:20px;
  background-color:white;
  border-radius: 0 0 24px 24px;
  box-shadow:3px -14px white,
    33px 70px #F19D2C,
    30px 84px #F19D2C;
  top:180px;
  left:308px;
}
.fur::before{
  width:40px;
  height:20px;
  background-color: #F19D2C;
  border-radius:  24px 24px 0 0;
  box-shadow:3px -14px  #F19D2C;
  top:96px;
  left:140px;
}
.fur::after{
  width:20px;
  height:40px;
  background-color: #F19D2C;
  border-radius:  0 40px 40px 0;
  box-shadow:18px -7px  #F19D2C;
  top:46px;
  left:-210px;
}

最后：

这里小编一套源码全部奉献，大家可以直接复制黏贴使用，看看效果。有更好的小功能的小伙伴，可以给小编留言，让小编也参观一下，学习一下。