1.整体效果
https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6yORMSqiaEKgpwibBgfcTQZNV0pI3M8t8HQm5XliaicSO42eBiboEUC3jxQOL1bRe0xlsd8bv04xXoKwg/640?wx_fmt=gif&from=appmsg&wxfrom=13
表单，也需要具有吸引力和实用性。HTML源码酷炫表单不仅能够提供给用户一种视觉上的享受，还能增强用户填写表单时的互动体验。本文将探讨如何利用HTML和CSS来创建既美观又功能强大的表单，这些表单将通过其独特的设计和动画效果，提升用户的整体体验。
2.完整代码
HTML
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>酷炫表单</title> <link rel="stylesheet" type="text/css" href="6_13.css">
</head>
<body>
<div class="form-container"> <form class="form"> <div class="form-group"> <label for="email">邮箱</label> <input required="" name="email" id="email" type="text"> </div> <div class="form-group"> <label for="textarea">内容</label> <textarea required="" cols="50" rows="10" id="textarea" name="textarea"> </textarea> </div> <button type="submit" class="form-submit-btn">提交</button> </form>
</div
</body>
</html>
CSS
body{background: #212121;}
.form-container { width: 400px; background: linear-gradient(#212121, #212121) padding-box, linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box; border: 2px solid transparent; padding: 32px 24px; font-size: 14px; font-family: inherit; color: white; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; border-radius: 16px; background-size: 200% 100%; animation: gradient 5s ease infinite;
} @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
} .form-container button:active { scale: 0.95;
} .form-container .form { display: flex; flex-direction: column; gap: 20px;
} .form-container .form-group { display: flex; flex-direction: column; gap: 2px;
} .form-container .form-group label { display: block; margin-bottom: 5px; color: #717171; font-weight: 600; font-size: 12px;
} .form-container .form-group input { padding: 12px 16px; border-radius: 8px; color: #fff; font-family: inherit; background-color: transparent; border: 1px solid #414141;
} .form-container .form-group textarea { padding: 12px 16px; border-radius: 8px; resize: none; color: #fff; height: 96px; border: 1px solid #414141; background-color: transparent; font-family: inherit;
} .form-container .form-group input::placeholder { opacity: 0.5;
} .form-container .form-group input:focus { outline: none; border-color: #e81cff;
} .form-container .form-group textarea:focus { outline: none; border-color: #e81cff;
} .form-container .form-submit-btn { display: flex; align-items: flex-start; justify-content: center; align-self: flex-start; font-family: inherit; color: #717171; font-weight: 600; width: 40%; background: #313131; border: 1px solid #414141; padding: 12px 16px; font-size: inherit; gap: 8px; margin-top: 8px; cursor: pointer; border-radius: 6px;
} .form-container .form-submit-btn:hover { background-color: #fff; border-color: #fff;
}
🌟 关键技术点如下：
- CSS动画：使用了
@keyframes规则创建了一个名为gradient的动画，该动画会改变背景的位置，从而实现背景渐变的动态效果。 - CSS Flexbox：使用了Flexbox布局来排列
.form-container元素的内容。这包括主轴和交叉轴的对齐、方向和间距。 - CSS过渡：在
.form-container .form-submit-btn:hover选择器中使用了过渡效果，使得背景颜色和边框颜色的变化更加平滑。 - CSS伪类：使用了
:active、:focus和:hover伪类来改变按钮和输入框在不同状态下的样式
