爱情，是每个人都在追求的东西。身为一个IT行业人士，我也会追求爱情，我也会像心爱的人表达感情，只是我所表达的方式与他人有所不同。我的主要战场在计算机上，所以我就想到了用计算机来表达感情，我是初学html，就想到了在网页上做一个爱心，还是会动的爱心：

这是效果视频：


一颗爱心送给你 - 个人 - Microsoft Edge 2022-04-27 16-38-59


 第一步：建立相应文件夹，打开DW软件，新建空白html5模板

html java 制作爱心 html写爱心_前端

html java 制作爱心 html写爱心_html_02

第二步：开始写爱心的代码（html5+css）

制作图形需要用到四个基础图形（也就是四个块），一个大的正方形（为主块），在大的正方形里面建立三个小正方形（前两个正方形需要将其修改为圆形）。

1、先建一个大的正方形的主块：

html代码

<div id="main"></div>

 css代码

#main{ width:500px; 
       height:500px; 
       margin:150px auto;  /*这里是将其居中，因为后期要用到position，所以后期我会将其去掉*/
       border:1px solid #F00; /*注意：这是块的边框，这里加边框是为了便于设计时的查看，后期为了美观，我会将其去掉*/
      }

效果图：

html java 制作爱心 html写爱心_html_03

2、再在主块main中建立三个小块：

第一个小块：

html代码

<div id="main">
    <div id="a"></div>
</div>

css代码

#main{ width:500px; 
       height:500px; 
       position:absolute; /*注意：这段也可以写为 position:relative; margin:150px auto; 但是不同的写法最后爱心的起始位置不同。*/
       border:1px solid #F00;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;  /*将a块正方形修改为圆形,并将其放在大正方形内测左上角*/
   }

效果图：

html java 制作爱心 html写爱心_html_04

  

第二个小块： 

html代码：

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
</div>

 css代码：

#main{ width:500px;
       height:500px; 
       position:absolute;
       border:1px solid #F00;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;   /*将b块正方形改为圆形，并将其放大正方形内测右上角*/
   }

效果图

html java 制作爱心 html写爱心_前端_05

 第三个小块：

html代码：

<div id="main">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
</div>

css代码：（这里我为了美观要把大正方形的边框去掉）

#main{ width:500px;
       height:500px; 
       position:absolute;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;
   }
#c{ width:300px;
    height:300px;
    background:#F00; 
    transform:translate(100px,100px) rotate(45deg);  /*将c块正方形旋转45度*/
  }

注意：这是c块正方形旋转45度后的效果图：

html java 制作爱心 html写爱心_前端_06

这是最后的效果图：

 

html java 制作爱心 html写爱心_前端_07

第三步：写让爱心动起来的JavaScript代码 

如下：

var fl = document.getElementById('main');
var chroX = document.documentElement.clientWidth;  //yemian整个的高宽
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;   //盒子的位置
var offsetTop = fl.offsetTop;
var timer = 0;
console.log(offsetTop)
var x = 20;
var y = 20;    //x,y可以看作是爱心移动的速度。
window.onresize = function(){
    chroX = document.documentElement.clientWidth;  //yemian整个的高宽
    chroY = document.documentElement.clientHeight;
}
function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}

 注意：在写入js时，一定要保证id一致

第四步：在浏览器上执行代码，就可以得到一颗会跳动的爱心^_^（达到视频上的效果）

完整的代码如下：

html段代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一颗爱心送给你</title>
<link href="images/01.jpg" rel="shortcut icon"/>
<link href="css/Untitled-2.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div id="main">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>
<script type="text/javascript">
var fl = document.getElementById('main');
var chroX = document.documentElement.clientWidth;
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;
var offsetTop = fl.offsetTop;
var timer = 0;
console.log(offsetTop)
var x = 20;
var y = 20;
window.onresize = function(){
    chroX = document.documentElement.clientWidth;
    chroY = document.documentElement.clientHeight;
}
function move(){
    offsetLeft += x;
    offsetTop += y;
    fl.style.left = offsetLeft  + 'px';
    fl.style.top = offsetTop  + 'px';
    console.log(chroY)
}
window.onload = function(){
   timer = setInterval(function(){
        move();
        if(offsetTop+100 > chroY || offsetTop < 0){
            y = -y;
        }
        if(offsetLeft+100 > chroX || offsetLeft <0){
            x = -x;
        }
    },10)
}
fl.onmouseenter = function(){
    clearInterval(timer)
}
fl.onmouseleave = function(){
    window.onload();
}
</script>
</body>
</html>

css段代码：

#main{ width:500px;
       height:500px; 
       position:absolute;
      }
#a{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    left:0; 
    border-radius:50%;
   }
#b{ width:300px; 
    height:300px; 
    background:#F00; 
    position:absolute; 
    top:0; 
    right:0; 
    border-radius:50%;
   }
#c{ width:300px;
    height:300px;
    background:#F00; 
    transform:translate(100px,100px) rotate(45deg);
  }

注意：

1、在使用position时，用absolute和relative是不一样的效果，用absolute时，爱心运动的起始位置是窗口的左上角，用relative时，爱心运动的起始位置是窗口中间。（如果不明白这一点，请了解position元素的用法。

2、将正方形修改成圆形，其实是用border-radius属性把正方形的边框修改成弧形。

（小编也在努力学习中，请广大读者不要催更啦^-^）