- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS心型线</title>
- <link rel="stylesheet" href="http://fonts.googleapis.com/CSS?family=Tangerine">
- <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>
- //该片段来自于http://www.codesnippet.cn/detail/310520133695.html
来源: http://www.codesnippet.cn/detail/310520133695.html