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. 【转载】 python进程绑定CPU

    版权声明:本文为CSDN博主「人间再无张居正」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/u01388765 ...

  2. 一些八股：1.fetch 的理解。2.let、const、var

    一. 说说你对 Fetch 的理解,它有哪些优点和不足? Fetch API 是现代 JavaScript 中用于进行网络请求的接口,旨在替代传统的 XMLHttpRequest.它提供了一种更简单. ...

  3. CF1697C

    C. awoo's Favorite Problem 首先,检查两个字符串中所有字母的计数是否相同. 然后考虑下面的重述.字符串s中的字母 b是静止的.而字母a和c则在字符串中移动.第一种移动是将字母 ...

  4. .NET MAUI 布局

    先看一段代码的效果: <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns=& ...

  5. async await 状态机理解

    public async Task<string> Wait3S() { await Task.Delay(3000); Console.WriteLine("Wait 3 S& ...

  6. 004.MinIO-DirectPV分布式存储部署

    MinIO部署介绍 部署概述 Kubernetes hostpath.local和本地静态配置都存在需要事先在node节点准备好可用的块存储或文件系统,例如对插入的硬盘,或者磁盘阵列做分区格式化,文件 ...

  7. 2024年智能革命：HarmonyOS NEXT与盘古大模型5.0的颠覆性融合

    引言 2024年,这一年注定在全球智能设备市场的历史上写下浓墨重彩的一笔.作为全球科技巨头,华为再次以其前瞻性的布局,推动了技术与应用的深度融合.在这个充满变革的时代,华为通过不断扩展的鸿蒙生态系统, ...

  8. WPF 如何利用Blend给Button添加波纹效果

    先看一下效果吧: 如果不会写动画或者懒得写动画,就直接交给Blend来做吧; 其实Blend操作起来很简单,有点类似于在操作PS,我们只需要设置关键帧,鼠标点来点去就可以了,Blend会自动帮我们生成 ...

  9. 【Mac】之本地连接虚拟机linux环境

    上一篇安装完centos虚拟机之后,如何远程连接呢? 先进入虚拟机的界面: 发现没有bash 终端输入: # -bash :telnet:command not found # 发现是虚拟机没有安装 ...

  10. EasyDarwin，EasyNVR, EasyNVS, EasyDSS...这些都是啥

    EasyDarwin 是开源的基础版本, 其他都是衍生产品(http://www.easydarwin.org/) EasyNVR, 就是视频监控录像机,可以查看实时监控和保存监控视频, 如下图, ( ...