CSS动画（炫酷表单）
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;
}
关键技术点如下：
- CSS动画：使用了
@keyframes规则创建了一个名为gradient的动画，该动画会改变背景的位置，从而实现背景渐变的动态效果。 - CSS Flexbox：使用了Flexbox布局来排列
.form-container元素的内容。这包括主轴和交叉轴的对齐、方向和间距。 - CSS过渡：在
.form-container .form-submit-btn:hover选择器中使用了过渡效果，使得背景颜色和边框颜色的变化更加平滑。 - CSS伪类：使用了
:active、:focus和:hover伪类来改变按钮和输入框在不同状态下的样式
CSS动画（炫酷表单）的更多相关文章
- jQuery和CSS3超酷表单美化插件
这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...
- 前端笔记之Vue（六）分页排序|酷表单实战&Vue-cli
一.分页排序案例 后端负责提供接口(3000) 前端负责业务逻辑(8080) 接口地址:从8080跨域到3000拿数据 http://127.0.0.1:3000/shouji http://127. ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 范仁义html+css课程---7、表单
范仁义html+css课程---7.表单 一.总结 一句话总结: 表单标签的话主要掌握form标签.input标签(以及input标签的不同的type值).select标签.textarea等标签,及 ...
- 才趟过的一个坑，css造成的Validform表单提交按钮点击无效
最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...
- #WEB安全基础 : HTML/CSS | 0x10.1更多表单
来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...
- 6款漂亮HTML CSS样式用户留言表单
如今我们的网站.页面更加需要注重细节,不论是字体的样式.还是图片的分辨率清晰度都会影响到用户的访问体验和PV,以及用户以后是否会回访我们的网站/博客.如果有时间的时候,老左也会浏览和阅读相关的前端网站 ...
- 使用css实现炫酷的横屏滚动效果
炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是 ...
- 如何使用动画和精灵表单 Cocos2d-x 2.1.4
本文实践自 Ray Wenderlich.Tony Dahbura 的文章< How to Use Animations and Sprite Sheets in Cocos2D ...
- HTML5+CSS：02用户注册表单
新的学期已开始接近两个月了,还记得是在国庆节那几天申请的博客账号,可过了一个月都还没开始写博客,(>_<)有点小偷懒了,不过,学习还是不能落下的,今写一个有点实践运用的关于 ...
随机推荐
- cloudpickle —— Python分布式序列化的专用模块
给出cloudpickle的GitHub地址: https://github.com/cloudpipe/cloudpickle =================================== ...
- VS常用拓展以及快捷键
VS常用拓展以及快捷键 扩展1:Select Next Occurrence 该拓展可以当前目标.下一个目标.上一个目标,类似于Alt+鼠标拖动,但是可以在没对齐的情况下使用 安装 设置4个常用的快捷 ...
- k8s批量操作
批量删除Evicted状态pod kubectl -n gitee get pods | grep Evicted |awk '{print$1}'|xargs kubectl -n gitee de ...
- AI的那些名词
AI 是什么? Artificial Intelligence,即人工智能,1956年于Dartmouth学会上提出,一种旨在以类似人类反应的方式对刺激做出反应并从中学习的技术,其理解和判断水平通常只 ...
- C语言实现一个走迷宫小游戏（深度优先算法）
补充一下,先前文章末尾给出的下载链接的完整代码含有部分C++的语法(使用Dev-C++并且文件扩展名为.cpp的没有影响),如果有的朋友使用的语言标准是VC6的话可能不支持,所以在修改过后再上传一版, ...
- 五子棋AI：实现逻辑与相关背景探讨（上）
绪论 本合集将详细讲述如何实现基于群只能遗传算法的五子棋AI,采用C++作为底层编程语言 本篇将简要讨论实现思路,并在后续的文中逐一展开 了解五子棋 五子棋规则 五子棋是一种经典的棋类游戏,规则简单却 ...
- React函数式组件避免无用渲染的方案
在class组件中可以使用shouldComponentUpdate钩子函数,但是函数式组件中是没有这种钩子函数的,那么在函数式组件中来达到类似的效果呢? 答案是:React.Memo,如以下使用案例 ...
- js通过文件路径下载文件而不跳转页面
js通过文件路径下载文件,而页面不发生跳转 一.js下载文件而页面不进行跳转 1)方法一: 通过a标签触发文件流形式,代码如下: let url = 'http://xxxxx.zip' fetch( ...
- verilog vscode 与AI 插件
Verilog 轻量化开发环境 背景 笔者常用的开发环境 VIAVDO, 体积巨大,自带编辑器除了linting 能用,编辑器几乎不能用,仿真界面很友好,但是速度比较慢. Sublime Text, ...
- C++11 线程同步接口std::condition_variable和std::future的简单使用
std::condition_variable 条件变量std::condition_variable有wait和notify接口用于线程间的同步.如下图所示,Thread 2阻塞在wait接口,Th ...