生成模拟草稿颤振

当我们需要创建项目或设计时，草稿图通常是一个很好的开端。然而，有时候我们需要一个颤振、嘈杂的版面来模拟某些环境或氛围。在这篇文章中，我们将介绍如何使用HTML、CSS和JS来生成模拟草稿颤振。

实现思路

我们将在HTML中创建一个简单的表单，然后使用CSS让它看起来像一个草稿图。接着，我们将使用JS来实现颤振效果。

HTML

我们需要一个表单来作为我们草稿颤振的演示示例。我们创建一个包含输入框和按钮的表单：

<form>
  <label for="inputField">输入框：</label>
  <input type="text" id="inputField" placeholder="输入文字...">
  <button type="submit">提交</button>
</form>

CSS

我们将使用一些基本的CSS属性和值来为这个表单创建草稿图的外观。让它看起来手写，不规则和凌乱。

form {
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
}
form:before, form:after {
  content: '';
  position: absolute;
  left: -20px;
  top: -20px;
  right: -20px;
  bottom: -20px;
  z-index: -1;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
form:before {
  transform: rotate(-2deg);
}
form:after {
  transform: rotate(2deg);
}
form label {
  font-size: 20px;
  font-weight: bold;
}
form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid #ddd;
  font-size: 18px;
}
form button {
  padding: 10px 20px;
  background-color: #ddd;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

JS

现在我们来添加颤振的效果。我们将在表单上应用一个CSS类，来触发颤振动画。另外，我们将使用setTimeout()函数连续调用自己来模拟颤振效果。

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  form.classList.add('shaking');
  setTimeout(function() {
    form.classList.remove('shaking');
  }, 500);
  setTimeout(arguments.callee, 600);
});

结语

通过使用HTML、CSS和JS，我们可以很容易地生成一个模拟草稿颤振的效果。这个效果可以用于模拟各种场景，例如手写笔记、咖啡厅的环境和许多其他的情境。这只是一个简单的示例，您可以根据自己的需求进行修改和扩展。