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. 机器学习中的两个重要函数--sigmoid和softmax

    机器学习中,常常见到两个函数名称:sigmoid和softmax.前者在神经网络中反复出现,也被称为神经元的激活函数:后者则出现在很多分类算法中,尤其是多分类的场景,用来判断哪种分类结果的概率更大. ...

  2. [rCore学习笔记 023]任务切换

    导读 还是要先看官方手册. 学过DMA的同志可能比较好理解,一句话, 释放CPU总线 : 如果把应用程序执行的整个过程进行进一步分析,可以看到,当程序访问 I/O 外设或睡眠时,其实是不需要占用处理器 ...

  3. @RequestBody中传递json里的对象,对象包含list属性，对应body里的格式

    以下就是对应格式,直接复制进接口文档相关工具即可{ "userId": "88", "openCostCenterDTO": [ { &qu ...

  4. check Str's Character appearence frequence is ge 1

    import com.sun.org.apache.bcel.internal.generic.IF_ACMPEQ; import java.util.*; public class HackerRa ...

  5. 在NextChat中接入SiliconCloud API 体验不同的开源先进大语言模型

    NextChat介绍 One-Click to get a well-designed cross-platform ChatGPT web UI, with GPT3, GPT4 & Gem ...

  6. Apple Silicon 芯片 Mac 在 x86_64 模式下启动 Kettle

    苹果于 2020 年推出了自家设计的基于 ARM 架构的 M1 芯片,在日常生活的大部分使用过程中,M1 的体验很好.然而,依然存在一小部分软件无法兼容 ARM 架构,需要我们模拟 x86 的架构来运 ...

  7. AWS EC2 实例类型命名规则

    AWS EC2(Elastic Compute Cloud)实例类型的命名规则反映了实例的性能特征.用途和硬件配置.这些实例类型的名称由几个组件构成,每个组件都提供了关于该实例类型特定方面的信息.理解 ...

  8. bacnet mstp设备数据 转IEC61850项目案例

    目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 使用YABE软件读取BACNET MSTP设备信息 2 4 配置网关采集BACNET MSTP数据 4 5 用IEC61850协议转发数据 ...

  9. AI时代的信仰是什么

    信仰是人们内心深处的信念,是推动人类前进的驱动力.AI从几十年前的缓慢探索,到如今的飞速发展,是什么信仰在驱动这一切呢? 摩尔定律 聊起信仰,我就会想起信息时代的摩尔定律.摩尔定律是由英特尔联合创始人 ...

  10. 痞子衡嵌入式：JLink命令行以及JFlash对于下载算法的作用地址范围认定

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是JLink命令行以及JFlash对于下载算法的作用地址范围认定. 最近痞子衡在给一个 RT1170 客户定制一个 Infineon Mi ...