微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html代码小人比心表白

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代码真是太神奇啦!通过这个小人比心的表白代码,我相信很多人都可以把爱意传达到心仪的人了吧!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐