CSS动画（炫酷表单）
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伪类来改变按钮和输入框在不同状态下的样式
