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. mysql 重置主键

    开发时总是要向数据库写入测试数据,删掉以后id(自增主键)依然还是在增长,这个问题我遇到好多次,也都没有在意. 最近这个习惯被朋友嫌弃 = =||| 就在网上搜索了下mysql重置主键的办法: ALT ...

  2. 最近公共祖先模板(LCA)

    include <bits/stdc++.h> using namespace std; struct LCA { int n; vector<int> dep; vector ...

  3. 如何在 Recovery 中启用应用

    如果因为禁用了某个应用手机无法开机,那么你需要这个方法来救命 https://xdaforums.com/t/enable-or-disable-apps-directly-from-the-file ...

  4. apollo配置动态更新

    简单配置 使用@Value注解的配置会自动刷新配置 复杂对象 @Component("systemConfig") @ConfigurationProperties(prefix ...

  5. .netcore生命周期、消息管道

    .NET Core 的初始化过程涉及多个步骤,这些步骤从应用程序的启动开始,一直到应用程序准备好处理请求.下面是一个简化的概述,描述了 .NET Core 应用程序(特别是 ASP.NET Core ...

  6. Win32 sdk 下树形控件响应鼠标单击与双击,获得选中项的名称

    //窗口过程函数INT_PTR CALLBACK myWin::myWinDlgProc(HWND dlgHwnd, UINT uMsg, WPARAM wParam, LPARAM lParam) ...

  7. java_GUI

    package GUi;import java.awt.*;import static java.awt.Color.red;public class GuI { public static void ...

  8. Gluon 编译 JavaFx -> exe

    Gluon 编译 JavaFx -> exe 能力强的伙伴可以直接参考官方文档 开发工具 idea 2023.3 idea gluon plugin git apache-maven-3.8.4 ...

  9. 【YashanDB数据库】YAS-02143 invalid username/password, login denied

    [问题分类]错误码处理 [关键字]jdbc,02143 [问题描述]应用启动后,报错YAS-02143 invalid username/password, login denied [问题原因分析] ...

  10. CIIS 2023 丨聚焦文档图像处理前沿领域，合合信息 AI 助力图像处理与内容安全保障

    近日,2023第十二届中国智能产业高峰论坛(CIIS 2023)在江西南昌顺利举行.大会由中国人工智能学会.江西省科学技术厅.南昌市人民政府主办,南昌市科学技术局.中国工程科技发展战略江西研究院承办. ...