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;

}

关键技术点如下：

  1. CSS动画：使用了@keyframes规则创建了一个名为gradient的动画，该动画会改变背景的位置，从而实现背景渐变的动态效果。
  2. CSS Flexbox：使用了Flexbox布局来排列.form-container元素的内容。这包括主轴和交叉轴的对齐、方向和间距。
  3. CSS过渡：在.form-container .form-submit-btn:hover选择器中使用了过渡效果，使得背景颜色和边框颜色的变化更加平滑。
  4. CSS伪类：使用了:active、:focus和:hover伪类来改变按钮和输入框在不同状态下的样式

CSS动画（炫酷表单）的更多相关文章

  1. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  2. 前端笔记之Vue（六）分页排序|酷表单实战&Vue-cli

    一.分页排序案例 后端负责提供接口(3000) 前端负责业务逻辑(8080) 接口地址:从8080跨域到3000拿数据 http://127.0.0.1:3000/shouji http://127. ...

  3. 一款纯css3实现的超炫3D表单

    今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码 ...

  4. 范仁义html+css课程---7、表单

    范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...

  5. 才趟过的一个坑，css造成的Validform表单提交按钮点击无效

    最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...

  6. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

  7. 6款漂亮HTML CSS样式用户留言表单

    如今我们的网站.页面更加需要注重细节,不论是字体的样式.还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站/博客.如果有时间的时候,老左也会浏览和阅读相关的前端网站 ...

  8. 使用css实现炫酷的横屏滚动效果

    炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...

  9. 如何使用动画和精灵表单 Cocos2d-x 2.1.4

            本文实践自 Ray Wenderlich.Tony Dahbura 的文章< How to Use Animations and Sprite Sheets in Cocos2D ...

  10. HTML5+CSS：02用户注册表单

            新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...

随机推荐

  1. vue之循环遍历v-for

    1.背景 2.遍历数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. Functional PHP （通义千问）

    Functional PHP 是一个专为 PHP 开发者设计的库,旨在引入函数式编程的概念和工具,帮助开发者编写更高效.可读性强的代码.以下是几个使用 Functional PHP 库进行函数式编程的 ...

  3. [BJOI2016] IP地址 题解

    前言 来个不一样的做法,用到了 Trie 树和主席树,并且是可爱的在线算法. 题目链接:洛谷. 题目分析 对于一个查询 \(\texttt{ip}\),只考虑所有前缀字符串规则.以时间建里横轴,匹配长 ...

  4. NoSQL之事务和相关特性

    NoSQL 简介 NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL". 在现代的计算系统上每天网络上都会产生庞大的数据量. 这些数据有很大一部分是由关 ...

  5. 我们常用的地铁卡/银行卡，竟然运行着一个 Java 虚拟机

    我们日常使用 NFC 卡可以用来刷地铁,进出门禁,但是你有没有想过, 当我们使用一个 NFC 的 IC 卡刷卡进入地铁的时候,此时系统是如何知道我这个卡上有多少充值余额的? 这个薄薄的 NFC 卡到底 ...

  6. One-for-All：上交大提出视觉推理的符号化与逻辑推理分离的新范式 | ECCV 2024

    通过对多样化基准的严格评估,论文展示了现有特定方法在实现跨领域推理以及其偏向于数据偏差拟合方面的缺陷.从两阶段的视角重新审视视觉推理:(1)符号化和(2)基于符号或其表示的逻辑推理,发现推理阶段比符号 ...

  7. Linux 文件系统层次结构（FHS）解释

    详细的目录解释可以使用 man file-hierarchy 和 man hier 命令查看. 常见目录: 目录 描述 /bin binaries.在单用户模式下需要用到的基本命令的二进制文件,包括启 ...

  8. pyinstaller 打包 win32ctypes.pywin32.pywintypes.error: (225, '', '无法成功完成操作，因为文件包含病毒或潜在的垃圾软件。')

    背景: 使用python 写了一个程序,使用pyinstaller打包, 不使用-w --noconsole的命令打包隐藏命令行窗口时,是正常的, 但是使用-w或者--noconsole就会报错win ...

  9. 如何保证 Redis 的高并发和高可用？讨论redis的单点，高可用，集群

    如何保证 Redis 的高并发和高可用?讨论redis的单点,高可用,集群. 打开GitHub搜索redis,边可以看到,该项目的介绍是这样的: Redis is an in-memory datab ...

  10. Angular 18+ 高级教程 – Angular CLI

    前言 这篇会列出我开发中常用的 command. 并给予一些简单的说明 Command Format 先了解一下几个简单的 command 格式: 缩写 shortform 这个是完整版 ng gen ...