画心css+js

骑猪看日落 2023-10-06 19:07 26阅读 0赞

<!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JS心型线</title>
    <style>
    	div{
        
    	  position:absolute;
    	}
    	.xx-box{
        
    	  left:50%;
    	  top:50%;
    	  margin-left:-250px;
    	  margin-top:-250px;
    	  width:500px;
    	  height:500px;
    	  background-color:#000;
    	}
    	.xx-box .text{
        
    	  top:30%;
    	  height:48px;
    	  line-height:48px;
    	  color:#f00;
    	  text-shadow: 3px 3px 4px #f00;
    	  font-size:36px;
    	  font-weight:bold;
    	  width:100%;
    	  text-align:center;
    	  font-family:Tangerine,Tahoma,Arial,"\65f6\5c1a\4e2d\9ed1\7b80\4f53","\5b8b\4f53";
    	}
    	.xx-box .item{
        
    	  width:2px;
    	  height:20px;
    	  overflow:hidden;
    	}
    </style>
    </head>
    <body>
    <div class="xx-box" id="xx-box">
      <div class="text">I Love You</div>
    </div>
    <script>
    function createPoint(x,y,c){
        
      var div = document.createElement("div");
      div.className = "item";
      div.style.left = x + "px";
      div.style.top = y + "px";
      div.style.backgroundColor = c;
      document.getElementById("xx-box").appendChild(div);
    }
    function heartShape(r,dx,dy,c){
        //r:大小;dx:水平偏移;dy:垂直偏移;c:颜色
      var m,n,x,y,i;
      for(i = 0; i <= 200; i += 0.04){
        
        m = i;
        n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2);
        x = n * Math.cos(m) + dx;
        y = n * Math.sin(m) + dy;
        createPoint(x,y,c);
      }
    }
    heartShape(80,250,100,"#f00");
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/44d8bd3c1d0d4b5db17855a16958102f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16