设计背景为动画效果的注册页面，表单输入框是半圆矩形的html，css代码

以下是一个简单的半圆矩形表单输入框的HTML和CSS代码，你可以将其应用于你的注册页面：

HTML代码：

<form>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="用户名" required>
  </div>
  <div class="form-group">
    <input type="email" class="form-control" placeholder="邮箱" required>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" placeholder="密码" required>
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
</form>

CSS代码：

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-control {
  display: block;
  width: 100%;
  height: 40px;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 2px solid #ddd;
  border-radius: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-control:focus {
  border-color: #007bff;
  outline: 0;
}

.form-control::placeholder {
  color: #999;
}

.btn-primary {
  display: inline-block;
  font-weight: 400;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #007bff;
  border: 0;
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.5;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0069d9;
}

.btn-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

这段代码中，我们使用了 `border-radius` 属性将输入框的圆角设置为半圆形，同时使用了一些其他CSS属性来使其看起来更漂亮，比如 `box-shadow` 和 `transition` 等。

注意，在上面的代码中，我使用了 Bootstrap 的样式类 `form-control` 和 `btn` 来美化表单输入框和注册按钮。如果你没有使用 Bootstrap，你需要自己编写相应的CSS代码来美化它们。