在HTML＆CSS中创建动画表单
动画表格是吸引用户并使他们更有可能填写您的表格的新方式。通过使用动画，您可以为您的表格添加一种动作感和兴奋感，使它们更具视觉吸引力和更易于使用。
有许多不同的方式来使您的表格动画。您可以使用简单的动画，例如移动形状或文本，也可以创建更复杂的动画，例如与用户交互的字符或对象。您选择的动画类型将取决于表单和目标受众的目的。
例如，如果您要为孩子创建表格，则可以使用有趣而有趣的动画来保持它们的参与度。如果您正在为业务网站创建表格，则可以使用更专业的动画来创造信任感和信誉。
无论您选择哪种类型的动画，请确保它与表单的内容相关，并且易于遵循。动画的目的是使您的表格更加用户友好和愉悦，因此不要过度使用。
这是使用动画表格的一些好处：
增加参与度：动画表格在视觉上比静态表格更具吸引力，这可能会导致用户的参与度增加。
提高的完成率：动画表格可以通过使表格更加用户友好和愉悦来帮助提高完成率。
更好的用户体验：动画表格可以通过使表格更具互动性和引人入胜来提供更好的用户体验。
提高品牌知名度：动画形式可以通过创造更难忘和引人入胜的用户体验来帮助提高品牌知名度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Form</title>
<!-- link style.css file -->
<link rel="stylesheet" href="style.css">
<!-- Boostrap 5 CDN Links, you can find it on boostrap website -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</head>
<body>
<div class="main-div">
<div class="card">
<div class="border-animation"></div>
<div class="card-body p-5 text-white">
<h5 class="card-title mb-5">Login</h5>
<div class="mb-3 input-div position-relative">
<input type="email" class="form-control input-class">
<label for="email" class="text-secondary small">Email</label>
</div>
<br>
<div class="mb-3 input-div position-relative">
<input type="password" class="form-control input-class">
<label for="password" class="text-secondary small">Password</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input">
<label for="password" class="form-check-label">Remember me</label>
</div>
<button class="btn btn-primary float-end" type="submit">Submit</button>
</div>
</div>
</div>
</body>
</html>
解释
该代码适用于使用Bootstrap 5对其进行样式的HTML表单。该表单具有三个输入字段：一个电子邮件字段，一个密码字段和一个用于记住用户登录信息的复选框。表格还具有提交按钮。
该代码以<！doctype HTML>声明开头，该声明告诉浏览器该文档是HTML5文档。标签指定文档的语言是英语。
该文档的<head>部分包含文档的元数据，例如标题，charset和链接到CSS和JavaScript文件。
文档的<body>部分包含文档的主要内容。在这种情况下，主要内容是表格。
该表格包裹在<div class="main-div">元素中。该元素用于给出一定宽度和边缘的形式。
形式本身是<div class="card">元素。该元素用于使表格类似于卡片外观。
该表单中有一个<div class="border-animation">元素。该元素用于创建围绕形式的边框动画。
该表单内部还具有<div class="card-body p-5 text-white">元素。该元素用于使形式具有白色背景和一些填充。
该表单具有三个输入字段：一个电子邮件字段，一个密码字段和一个用于记住用户登录信息的复选框。这些输入字段全部包裹在<div class="mb-3 input-div position-relative">元素中。该元素用于给输入字段一些边距并相对于彼此的位置。
提交按钮是<button class="btn btn-primary float-end" type="submit">Submit</button>元素。此元素用于将表单数据提交到服务器。
该代码还使用Bootstrap 5 CDN链接来样式表单。这些链接用于将Bootstrap CSS和JavaScript文件导入文档。
body{
background-image: url(https://images.wallpaperscraft.com/image/single/eclipse_moon_circle_138151_1600x900.jpg);
}
.main-div{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main-div .card{
background-color: transparent;
overflow: hidden;
}
.main-div .card-body{
z-index: 9;
background-color: #000;
width: 99.2%;
margin: 0.8px auto;
max-height: 360px;
}
.input-div label{
position: absolute;
top: 18%;
left: 9px;
transition: 0.5s;
}
.input-class:focus ~ label{
top: -28px;
left: 0;
transition: 0.5s;
color: #fff !important;
}
.input-class{
z-index: 9;
}
.main-div .border-animation{
position: absolute;
width: 100%;
height: 100%;
content: "";
border: 2px solid #fff;
animation: spin 10s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
解释
身体元素具有设置为图像URL的背景图像属性。这将将身体元素的背景图像设置为由URL指定的图像。
主距离元素具有分别设置为弯曲，中心和中心的显示，合理性和对齐项属性。这将使主距离元素成为弯曲容器，其子女水平和垂直都居中。
主距离.Card元素具有设置为透明的背景色属性。这将使卡元素透明，以便可以通过它看到身体元素的背景图像。
主div .card-body元素具有设置为9的z index属性。这将使卡与体元素成为卡片元素中的最高元素，以便将其显示在其他元素上方在卡中。
输入div标签元素具有设置为绝对的位置属性。这将使标签元素绝对放置，以便将其相对于父元素定位。
输入级：焦点〜标签选择器将在关注输入元素时将以下样式应用于标签元素：
顶部属性设置为-28px。
左属性设置为0。
颜色属性设置为#fff。
输入级选择器将对输入元素应用以下样式：
Z-Index属性设置为9。
Main-Div .Border-Border-Animation元素具有设置为绝对，100％，100％，“”和2PX固体#FFF的位置，宽度，高度，内容和边框特性。这将在卡体元素周围创建边框动画。
边框动画元件的动画特性设置为旋转10s线性无限。这将使边界动画每10秒旋转360度，并且它将无限地循环。
@keyframes规则定义了旋转动画的动画步骤。 100％的步骤将旋转边界360度。
