html代码小人比心表白

最近在学习HTML代码，发现了一种可爱的小人比心表白的代码，太可爱啦！今天我来分享一下这个代码，让大家都可以用它来表达爱意。

<html>
<head>
<style type="text/css">
  .love{
    text-align: center;
    font-size: 30px;
    color: red;
    transform: rotate(15deg)
  }
  .love .head{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #FFC0CB;
    position: relative;
    margin: 0 auto;
  }
  .love .body{
    width:100px;
    height:100px;
    border-radius: 50px 50px 0 0;
    background-color: #FFC0CB;
    position: relative;
    margin: -20px auto 0;
  }
  .love .foot{
    width: 15px;
    height: 60px;
    background-color: #ffc0cb;
    position: absolute;
    bottom: -50px;
    left:30px;
    transform: rotate(-45deg)
  }
  .love .foot.right{
    left: auto;
    right: 30px;
    transform: rotate(45deg)
  }
  .love .hand{
    width: 15px;
    height: 30px;
    background-color: #ffc0cb;
    position: absolute;
    top: -20px;
  }
  .love .hand.left{
    left: -12.5px;
    transform: rotate(-45deg)
  }
  .love .hand.right{
    right: -12.5px;
    transform: rotate(45deg)
  }
</style>
</head>
<body>
<div class="love">
  <div class="head"></div>
  <div class="hand left"></div>
  <div class="body"></div>
  <div class="hand right"></div>
  <div class="foot left"></div>
  <div class="foot right"></div>
</div>
</body>
</html>

我已经复制了代码，并把它粘贴在我的编辑器里。想要表白的时候，我只需要在代码中找到那个可爱的小人，然后在

标签中添加我想说的话就可以啦！不得不说，HTML代码真是太神奇啦！通过这个小人比心的表白代码，我相信很多人都可以把爱意传达到心仪的人了吧！

上一篇：css+图片设置的属性下一篇：css3缩放后占位问题

html代码小人比心表白

相关文章