一个JavaScript的求爱小特效

现在我将详细讲解如何实现一个JavaScript的求爱小特效。

实现思路

我们可以利用HTML、CSS和JavaScript来实现这个小特效。具体实现过程如下：

首先，在HTML文件中添加两个input标签分别用于输入男方和女方的名字，以及一个button标签用于触发求爱动画；
然后，使用CSS样式来美化输入框和按钮的样式；
接着，使用JavaScript为button按钮绑定一个点击事件，当用户点击按钮后，会触发求爱动画；
最后，在JavaScript中编写一段求爱动画的代码，根据用户输入的名字，展示一段特效文字动画。

示例说明

下面将通过两个示例来详细说明如何实现上述实现思路。

示例一

HTML代码：

<input type="text" id="boy" placeholder="请输入男方姓名">
<input type="text" id="girl" placeholder="请输入女方姓名">
<button id="love">确认</button>

CSS代码：

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 10px;
  margin-right: 20px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: #FF69B4;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

JavaScript代码：

let love = document.getElementById("love");

love.onclick = function() {
  let boy = document.getElementById("boy").value;
  let girl = document.getElementById("girl").value;

  let text = document.createElement("div");
  text.className = "text";
  document.body.appendChild(text);

  let heart = document.createElement("span");
  heart.className = "heart";
  document.body.appendChild(heart);

  setTimeout(() => {
    heart.style.top = "150px";
  }, 200);

  setTimeout(() => {
    text.innerText = `${boy} ❤️ ${girl}`;
    text.style.top = "50%";
    text.style.opacity = "1";
  }, 1000);
}

这个示例中，当用户输入男方和女方姓名后，点击确认按钮，就会触发一段求爱动画。首先，页面会出现一个心形图案，随后会显示出"男方姓名 ❤️ 女方姓名" 的文字动画。

示例二

HTML代码：

<input type="text" id="boy" placeholder="请输入男方姓名">
<input type="text" id="girl" placeholder="请输入女方姓名">
<button id="love">确认</button>
<div class="frame">
  <div class="heart"></div>
</div>

CSS代码：

body {
  background-color: #E6E6FA;
}

input[type="text"] {
  padding: 10px;
  border: none;
  border-radius: 10px;
  margin-right: 20px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  background-color: #FF69B4;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heart {
  position: relative;
  width: 160px;
  height: 142px;
  transform: rotate(-45deg);
  background-color: #FF69B4;
  border-radius: 50% 50% 0 0;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  background-color: #FF69B4;
}

.heart:before {
  width: 160px;
  height: 142px;
  top: -71px;
  border-radius: 50% 50% 0 0;
}

.heart:after {
  width: 160px;
  height: 142px;
  left: -80px;
  border-radius: 50% 0 0 50%;
}

.heart:before {
  transform: rotate(-45deg);
}

.heart:after {
  transform: rotate(45deg);
}

JavaScript代码：

let love = document.getElementById("love");

love.onclick = function() {
  let boy = document.getElementById("boy").value;
  let girl = document.getElementById("girl").value;

  let text = document.createElement("div");
  text.className = "text";
  document.body.appendChild(text);

  let heart = document.querySelector(".heart");
  heart.classList.add("animate");

  setTimeout(() => {
    text.innerText = `${boy} ❤️ ${girl}`;
    text.style.top = "50%";
    text.style.opacity = "1";
  }, 1000);
}

这个示例中，当用户输入男方和女方姓名后，点击确认按钮，同样会触发一段求爱动画。这个特效中，页面中会出现一个心形图案，同时文字动画也会随之出现。不同于前面的示例，这个特效中的心形图案使用的是伪元素来实现。