先上效果
🌟表单，也需要具有吸引力和实用性。HTML源码酷炫表单不仅能够提供给用户一种视觉上的享受，还能增强用户填写表单时的互动体验。本文将探讨如何利用HTML和CSS来创建既美观又功能强大的表单，这些表单将通过其独特的设计和动画效果，提升用户的整体体验。
完整代码
HTML：
<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
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伪类来改变按钮和输入框在不同状态下的样式。
