HTML&CSS：超有趣的登录表单

这个页面实现了一个具有 3D 效果和动画的登录表单，包含多个输入框和一个提交按钮。页面使用了 Flexbox 布局和 CSS 动画来增强视觉效果和用户体验。输入框和按钮具有良好的视觉效果和交互体验，包括悬停和聚焦效果。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .form {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 20px;
            background: linear-gradient(to bottom, #0077be, #3b8df2);
            border-radius: 10px;
            overflow: hidden;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform: rotateX(-10deg);
            transition: all 0.3s ease-in-out;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
            animation: form-animation 0.5s ease-in-out;
        }

        @keyframes form-animation {
            from {
                transform: rotateX(-30deg);
                opacity: 0;
            }

            to {
                transform: rotateX(0deg);
                opacity: 1;
            }
        }

        .input {
            padding: 10px;
            border-radius: 5px;
            background-color: transparent;
            transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            color: rgb(255, 255, 255);
            border: 2px solid #3b8df2;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }

        .input::placeholder {
            color: #fff;
        }

        .input:hover,
        .input:focus {
            border-color: #3b8df2;
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(1.05) rotateY(20deg);
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            outline: none;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #3b8df2;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            transform: rotateX(-10deg);
            transition: all 0.3s ease-in-out;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }

        button:hover {
            background-color: #0077be;
            font-size: 17px;
            transform: scale(1.05) rotateY(20deg) rotateX(10deg);
            box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }
    </style>
</head>

<body>
    <form class="form">
        <input placeholder="Enter your name" class="input" type="text">
        <input placeholder="Enter your email" class="input" type="text">
        <input placeholder="*********" class="input" type="password">
        <button>Submit</button>
    </form>
</body>

</html>

HTML 结构

form：定义了一个表单，包含多个输入框和一个提交按钮。
input：定义了一个文本输入框，用于输入姓名。
input：定义了一个文本输入框，用于输入电子邮件。
input：定义了一个密码输入框。
button：定义了一个提交按钮。

CSS 样式

.form：设置为相对定位。使用 Flexbox 布局，列方向排列。定义了内边距、背景颜色（线性渐变）、圆角、溢出隐藏、透视效果、3D 变换样式、变换效果、过渡效果、阴影和动画效果。
@keyframes form-animation：定义了一个动画，从 rotateX(-30deg)和 opacity: 0 到 rotateX(0deg)和 opacity: 1。
.input：定义了内边距、圆角、背景颜色（透明）、过渡效果、3D 变换样式、背面隐藏、颜色、边框和阴影。
.input::placeholder：设置占位符文本的颜色为#fff。
.input:hover, .input:focus：定义了输入框悬停和聚焦时的样式，包括边框颜色、背景颜色、变换效果和阴影。
button：定义了内边距、边框、圆角、背景颜色、颜色、字体大小、光标样式、3D 变换样式、背面隐藏、变换效果、过渡效果和阴影。
button:hover：定义了按钮悬停时的样式，包括背景颜色、字体大小、变换效果和阴影。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！