如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽

时间：2019-12-24 21:05:26 收藏：0 阅读：224

如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽

马上圣诞节了，我相信很多同学的头像已经戴上了圣诞帽
我之前也打算用PS给我的头像加一顶圣诞帽，但是想了想要不就用最简单的HTML给头像加上一顶吧
其实是我自己不会PS，哈哈哈
废话不多说，效果图

代码

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <title>圣诞帽</title>
      <style>
          *{
              padding:0;
              margin:0;
              font-weight:bold;
          }
          #hat{
          margin:0 auto;
              color:red;
              text-align:center;
              height:160px;               /* 设置高度 */
              width:160px;                /* 设置宽度 */
              transform:rotate(-15deg);   /* 设置旋转角度 */
              position:relative;
              top:220px;                  /* 调节Y坐标 */
              left:-80px;                 /* 调节X坐标 */
          }
          .header{
              height:640px;               /* 给你头像设置高度 */
              width:640px;                /* 给你头像设置宽度 */
              margin:0 auto;

          }
      </style>
  </head>
  <body>
      <div id="hat" >
      </div>
      <div class="header">
          <img src="header.jpg" />  <!-- 这里是图片的路径 -->
      </div>



  </body>
  <script>
      window.onload = function(){
          var Hat = document.getElementById('hat');       //拿到hat
          var line = Hat.offsetHeight / 20;               //拿到高度 并计算出需要多少行
          var str = "";
          for(var i = 0; i < line; i++){                  //画帽子
              for(var j = 0; j < i; j++){
                  str += '10';
                  //Hat.innerHTML += '10';
              }
              if(i > line - 2 || i == 1){
                  Hat.innerHTML += '<p style="color:white;">' + str + '</p>';
              }else{
                  Hat.innerHTML += '<p>' + str + '</p>';
              }
              str = '';
          }

      };
  </script>
</html>

如果你觉得好玩，又不想自己再写一份
那么你用我的只需要改img标签的src 以及自己挪动一下帽子的位置即可（在css里面的hat改就OK了）

原文：https://www.cnblogs.com/nanke33/p/12093532.html