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. Dijkstra单源最短路模板

    struct DIJ { using i64 = long long; using PII = pair<i64, i64>; vector<i64> dis; vector& ...

  2. canvas实现手动绘制矩形

    开场白 虽然在实际的开发中我们很少去绘制流程图 就算需要,我们也会通过第3方插件去实现 下面我们来简单实现流程图中很小的一部分 手动绘制矩形 绘制一个矩形的思路 我们这里绘制矩形 会使用到canvas ...

  3. 2023 CCPC 桂林题解

    gym H. Sweet Sugar 一个经典贪心是从下到上,如果子树 \(u\) 剩下的部分(一定包含 \(u\))包含合法连通块,那么这个连通块给答案贡献 \(1\),切断 \(u\) 与 \(f ...

  4. manim边学边做--圆弧形

    圆弧形可以算是一种特殊的圆形,它是圆形的一部分.manim中,单独为圆弧形状封装了几个模块: Arc:通用的圆弧,根据半径和角度来绘制圆弧 ArcBetweenPoints:根据两个点和角度来绘制圆弧 ...

  5. 关于EF延时加载的面试题

    public async Task<ActionResult> GetData() { var data = (from leftdata in GetLeft() join rightd ...

  6. [rCore学习笔记 025]分时多任务系统与抢占式调度

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 本节重 ...

  7. MFC 静态拆分视图窗口

    今天学习了MFC中拆分窗口,现将方法记录下. 想要在窗口视图中拆分成左右两个视图窗口,首先要注意的是拆分后要加载到左右的视图要符合动态创建的类, 也就是要在自己创建的视图类中添加动态创建机制宏. 类内 ...

  8. python get 请求接口 忽略证书验证

    import requests # 请求接口 import ssl context = ssl.create_default_context() context.check_hostname = Fa ...

  9. 工程化Vue使用

    目录 环境准备 Vue项目-创建 Vue项目开发流程 API风格 案例 推荐阅读: VUE-局部使用 环境准备 介绍:create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的V ...

  10. seata 下载及安装

    分布式事务 参考文章: 分布式事务实战方案汇总 https://www.cnblogs.com/yizhiamumu/p/16625677.html 分布式事务原理及解决方案案例https://www ...