使用 HTML+CSS 打造高颜值信用卡支付表单

本文目录

前言

在电商或支付类网页开发中，一个美观且有交互感的支付表单，能直接提升用户的操作体验。今天我把这个纯 HTML+CSS 实现的信用卡支付表单分享出来，没有复杂的 JavaScript，新手也能跟着复刻，既能掌握核心的 CSS 布局技巧，又能做出实用的页面组件。

效果预览

这个支付表单以渐变蓝为主色调，核心是模拟信用卡的卡片布局。默认状态下卡片会轻微下移，当鼠标悬浮到支付区域时，卡片会平滑上移，同时支付区域的内边距会动态调整；卡片包含芯片、银行 logo、卡号、持卡人等核心信息项，搭配渐变背景和轻量阴影，整体既有层次感，又有丝滑的交互体验，视觉和操作感都很在线。

目标与实现思路

核心目标

1. 还原信用卡的视觉样式，包含芯片、logo、卡号等关键视觉元素；

2. 实现 hover 交互效果，让表单有动态感，提升用户体验；

3. 保证表单布局规整，样式简洁易读，符合支付场景的使用习惯；

4. 用渐变和阴影增强视觉质感，整体风格统一协调。

实现思路

1. HTML 层面：搭建清晰的层级结构，外层包裹支付区域，内部拆分背景层、卡片层、表单元素和操作按钮；

2. CSS 层面：用 flex 布局实现元素居中与灵活排版；借助 linear-gradient 实现渐变背景；通过transform+transition实现 hover 位移过渡；用绝对定位精准摆放芯片、logo 等元素；重置默认样式保证跨浏览器一致性。

HTML结构说明

整个表单的核心结构嵌套在body的.payment容器中，层级清晰且无冗余：

.bg：绝对定位的渐变背景层，放在卡片下方，营造视觉层次；

.card：信用卡卡片主体，包含芯片图片、模拟 logo 的圆形元素、可编辑的银行名称，以及卡号、持卡人等表单项；

form：包裹所有输入项，通过 inputBox（单个输入项容器）和 group（多输入项组合容器）规整布局；

.btn：确认支付按钮，放在卡片下方，作为操作收尾。

CSS样式详解

这部分重点拆解实现效果的核心 CSS 属性，也是整个案例的关键：

1. 全局样式重置

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

box-sizing: border-box 是网页布局的基础操作，能让元素的内边距、边框不会撑开宽度，避免布局错位，也是我做所有页面都会先设置的属性。

2. 页面居中与背景渐变

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#73c1ff, #fff)
}

display: flex + justify-content: center + align-items: center：实现支付区域在页面垂直 + 水平居中，min-height: 100vh 保证 body 占满整个视口高度；

linear-gradient：线性渐变属性，这里从浅蓝到白色过渡，让页面背景更清爽，参数顺序为 “起始色，结束色”。

3. hover 交互的核心：transition + transform

.payment {
    /* 其他样式 */
    transform: translateY(-63px);
    transition: 0.5s;
}
.payment:hover {
    transform: translateY(0);
}
.payment .card{
    /* 其他样式 */
    transform: translateY(127px);
    transition: 0.5s;
}
.payment:hover .card{
    transform: translateY(0);
}

transition: 0.5s：给样式变化添加 0.5 秒过渡，让 hover 时的位移效果丝滑不生硬；

transform: translateY()：控制元素沿垂直方向位移，是实现卡片 “展开 / 收起” 的核心。

4. 绝对定位与装饰性样式

.payment .bg{
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%;
    border-radius: 25px;
    background: linear-gradient(225deg,#2196f3,#ff4efd);
}
.logo{
    position: absolute;
    top: 130px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: #ea222c;
    border-radius: 50%;
    box-shadow: -40px 0 0 rgba(255,164,36,0.5);
}

position: absolute：让元素脱离文档流，配合top/bottom/left/right精准定位背景层、logo、芯片；

linear-gradient(225deg,…)：指定渐变角度，让背景渐变更有视觉冲击力；

box-shadow：给 logo 添加偏移阴影，模拟信用卡多色 logo 的视觉效果。

5. 表单样式优化

.inputBox input{
    outline: none;
    border: none;
    background: transparent;
    font-size: 1.8em;
    color: #333;
}

完整源码附录

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML+CSS实现信用卡支付表单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 支付区域外层容器：承载所有元素 -->
    <div class="payment">
        <!-- 支付区域渐变背景层：纯装饰，提升视觉层次 -->
        <div class="bg"></div>
        <!-- 信用卡卡片主体容器 -->
        <div class="card">
            <!-- 信用卡芯片图片：需替换为自己的芯片png图路径 -->
            <img src="chip.png" class="chip">
            <!-- 模拟信用卡logo：用圆形+阴影实现 -->
            <div class="logo"></div>
            <!-- 银行名称：设置contenteditable可直接编辑 -->
            <h2 class="bankName" contenteditable="true">Bank Name</h2>
            <!-- 支付表单：包含卡号、持卡人等核心输入项 -->
            <form>
                <!-- 卡号输入项 -->
                <div class="inputBox">
                    <span>Card No.</span>
                    <input type="text" placeholder="0123 4567 8901 2345" maxlength="19">
                </div>
                <!-- 持卡人输入项 -->
                <div class="inputBox">
                    <span>Card Holder</span>
                    <input type="text" placeholder="Mark">
                </div>
                <!-- 有效期+CCV 组合容器：两端对齐布局 -->
                <div class="group">
                    <div class="inputBox">
                        <span>Valid Thru</span>
                        <input type="text" placeholder="MM/YY" maxlength="5">
                    </div>
                    <div class="inputBox">
                        <span>CCV</span>
                        <input type="password" placeholder="****" maxlength="6">
                    </div>
                </div>
            </form>
        </div>
        <!-- 确认支付按钮 -->
        <button class="btn">Confirm and Pay</button>
    </div>
</body>
</html>

style.css

/* 全局样式重置：清除默认边距，统一盒模型 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 页面主体样式：flex垂直+水平居中，渐变背景，占满视口高度 */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(#73c1ff, #fff);
}

/* 支付区域外层容器：相对定位，flex垂直布局，初始位移+过渡 */
.payment {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0px;
    transform: translateY(-63px);
    transition: 0.5s; /* hover过渡动画时长 */
}

/* 鼠标悬浮支付区域：调整内边距，位移归位 */
.payment:hover {
    padding: 40px;
    transform: translateY(0);
}

/* 支付区域背景层：绝对定位在底部，渐变背景+圆角 */
.payment .bg{
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%;
    border-radius: 25px;
    background: linear-gradient(225deg,#2196f3,#ff4efd);
}

/* 信用卡卡片样式：相对定位，白色背景，阴影，初始下移+过渡 */
.payment .card {
    position: relative;
    width: 580px;
    height: 350px;
    background: #fcfcfc;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.05); /* 轻量阴影增强质感 */
    z-index: 1000; /* 保证卡片在背景层上方 */
    overflow: hidden; /* 隐藏溢出内容 */
    transform: translateY(127px);
    transition: 0.5s;
}

/* 鼠标悬浮支付区域：卡片位移归位 */
.payment:hover .card{
    transform: translateY(0);
}

/* 卡片装饰伪元素：渐变圆形，提升层次感 */
.payment .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05));
    pointer-events: none; /* 不影响鼠标交互 */
}

/* 芯片样式：绝对定位，限制最大宽度 */
.chip{
    position: absolute;
    max-width: 70px;
}

/* 信用卡logo：绝对定位，圆形背景+偏移阴影模拟组合logo */
.logo{
    position: absolute;
    top: 130px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: #ea222c;
    border-radius: 50%;
    box-shadow: -40px 0 0 rgba(255,164,36,0.5);
}

/* 银行名称：灰色，右对齐，可编辑 */
.bankName {
    color: #999;
    text-align: end;
    outline: none;
    width: 100%;
    font-size: 1.5em;
}

/* 表单容器：与上方元素拉开间距 */
form{
    margin-top: 45px;
}

/* 单个输入项容器：垂直布局，底部间距 */
.inputBox {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

/* 输入项提示文字：蓝色，适中字号 */
.inputBox span{
    color: #089cff;
    font-size: 1.1em;
}

/* 输入框样式：清除边框/轮廓，透明背景，大号字体提升可读性 */
.inputBox input{
    outline: none;
    border: none;
    background: transparent;
    font-size: 1.8em;
    color: #333;
}

/* 组合输入项容器：两端对齐，垂直居中 */
.group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CCV输入框：限制最大宽度 */
.group .inputBox:last-child {
    max-width: 60px;
}

/* 确认按钮：白色背景，轻阴影，圆角，光标指针 */
.btn {
    position: relative;
    margin-top: 40px;
    padding: 15px 20px;
    border-radius: 5px;
    border: none;
    outline: none;
    background: #fff;
    color: #333;
    font-size: 1.5em;
    cursor: pointer;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
}

结语 & 行动建议

这个支付表单的核心，其实是把 CSS 的布局、渐变、过渡这些基础属性用到位。看似复杂的效果，拆解后都是一个个简单的 CSS 属性组合，只要理解透这些属性的用法，就能举一反三做出更多样式。

我建议你先把源码复制下来，本地新建 index.html 和 style.css 文件粘贴进去，替换芯片图片的路径（找一张信用卡芯片的 PNG 图即可），然后试着动手修改：比如换一套渐变颜色、调整 hover 的过渡时间、修改卡片尺寸，甚至给按钮加个 hover 变色效果。

动手修改的过程，比单纯看代码更能理解 CSS 的逻辑。如果遇到不懂的属性，去 MDN 查一下官方解释，结合实际效果对比，很快就能掌握。其实前端样式的学习，无非是多练、多改、多试，希望这个小案例能帮你巩固 CSS 基础，也期待你做出更有创意的支付表单～

转载作品，原作者：Silvana前端指北，文章来源：https://mp.weixin.qq.com/s/gV3T33xYzmTZz-E_46FqEQ