原创YouTube@ Online Tutorials

css代码：

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

}

body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: #03080a;

}

.container {

    width: 80%;

    padding: 20px;

}

.container h2 {

    width: 100%;

    color: #45f3ff;

    font-size: 36px;

    text-align: center;

    margin-bottom: 10px;

}

.container .row100 {

    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}

.container .row100 .col {

    position: relative;

    width: 100%;

    padding: 0 10px;

    margin: 30px 0 10px;

    transition: 0.5s;

}

.container .row100 .inputBox {

    position: relative;

    width: 100%;

    height: 40px;

    color: #45f3ff;

}

.container .row100 .inputBox input,

.container .row100 .inputBox textarea {

    position: absolute;

    width: 100%;

    height: 100%;

    background: transparent;

    box-shadow: none;

    border: none;

    outline: none;

    font-size: 18px;

    padding: 0 10px;

    z-index: 1;

    color: #000;

}

.container .row100 .inputBox .text {

    position: absolute;

    top: 0;

    left: 0;

    line-height: 40px;

    font-size: 18px;

    padding: 0 10px;

    display: block;

    transition: 0.5s;

    pointer-events: none;

}

.container .row100 .inputBox input:focus+.text,

.container .row100 .inputBox input:valid+.text {

    top: -35px;

    left: -10px;

}

.container .row100 .inputBox .line {

    position: absolute;

    bottom: 0;

    display: block;

    width: 100%;

    height: 2px;

    background-color: #45f3ff;

    transition: 0.5s;

    border-radius: 2px;

    pointer-events: none;

}

.container .row100 .inputBox input:focus~.line,

.container .row100 .inputBox input:valid~.line {

    height: 100%;

}

.container .row100 .inputBox .textarea {

    position: relative;

    width: 100%;

    height: 100px;

    padding: 10px 0;

}

.container .row100 .inputBox textarea {

    height: 100%;

    resize: none;

    /* background-color: #000; */

}

.container .row100 .inputBox textarea:focus+.text,

.container .row100 .inputBox textarea:valid+.text {

    top: -35px;

    left: -10px;

}

.container .row100 .inputBox textarea:focus~.line,

.container .row100 .inputBox textarea:valid~.line {

    height: 100%;

}

input[type="submit"] {

    border: none;

    padding: 7px 35px;

    cursor: pointer;

    /* outline設置边框样式 */

    outline: none;

    background-color: #45f3ff;

    color: #000;

    font-size: 18px;

    border-radius: 2px;

}

html源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="container">

        <h2>Contact Us</h2>

        <div class="row100">

            <div class="col">

                <div class="inputBox">

                    <input type="text" required="required">

                    <span class="text">First Name</span>

                    <span class="line"></span>

                </div>

            </div>

            <div class="col">

                <div class="inputBox">

                    <input type="text" required="required">

                    <span class="text">Last Name</span>

                    <span class="line"></span>

                </div>

            </div>

        </div>

        <div class="row100">

            <div class="col">

                <div class="inputBox">

                    <input type="text" required="required">

                    <span class="text">Email</span>

                    <span class="line"></span>

                </div>

            </div>

            <div class="col">

                <div class="inputBox">

                    <input type="text" required="required">

                    <span class="text">Mobile</span>

                    <span class="line"></span>

                </div>

            </div>

        </div>

        <div class="row100">

            <div class="col">

                <div class="inputBox textarea">

                    <textarea required="required"></textarea>

                    <span class="text">Type your message Here...</span>

                    <span class="line"></span>

                </div>

            </div>

        </div>

        <div class="row100">

            <div class="col">

                <input type="submit" value="Send">

            </div>

        </div>

    </div>

</body>

</html>

效果展示：



  • 自适应效果:

炫酷的CSS3响应式表单的更多相关文章

  1. ng2响应式表单-翻译与概括官网REACTIVE FORMS页面

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

  2. Angular2响应式表单

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

  3. Angular Reactive Forms -- Model-Driven Forms响应式表单

    Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )  官方文档:https://v2.angul ...

  4. Angular2响应式表单-翻译与概括官网REACTIVE FORMS页面

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

  5. Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  6. angular6的响应式表单

    1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的NgM ...

  7. Angular之响应式表单 ( Reactive Forms )

    项目结构 一 首页 ( index.html ) <!doctype html> <html lang="en"> <head> <met ...

  8. angular响应式表单 - 状态字段

    用于表单验证的过程: touched,untoched pristine,dirty pending

  9. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

随机推荐

  1. 201871010123-吴丽丽 《面向对象程序设计（Java）》第十六周学习总结

    201871010123-吴丽丽 <面向对象程序设计(Java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  2. 201871010108-高文利《面向对象程序设计（java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>  https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>  ...

  3. AcWing 795. 前缀和

    题目地址  https://www.acwing.com/solution/AcWing/content/2075/ 题目描述输入一个长度为n的整数序列. 接下来再输入m个询问,每个询问输入一对l, ...

  4. 史上最详细配置HTTPS

    HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.设计HTTP的初衷是为 ...

  5. WPF 精修篇 page

    原文:WPF 精修篇 page 前言 前段时间看UML 大象 这本书 虽然马上看到了精华片 最后还是暂时暂停 因为这本书 很好 但是暂时对现在的我来说 有点超前 很多东西理解起来还是很难 但是 这本书 ...

  6. spring cloud 2.x版本 Gateway自定义过滤器教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...

  7. (四)初识NumPy(函数和图像的数组表示)

    本章节主要介绍NumPy中的三个主要的函数,分别是随机函数.统计函数和梯度函数,以及一个较经典的用数组来表示图像的栗子!,希望大家能有新的收货,共同进步! 一.np.random的随机函数(1) ra ...

  8. Linux Ubuntu 16.04 安装步骤+远程环境

    简介 Ubantu 16.04 系统是一款比较稳定的linux系统,适合用户使用以及针对一些兼容性的服务搭建. 这里我推荐安装桌面版,用于方便使用. 准备工作 1.准备1个U盘空间5G以上 2.需下载 ...

  9. TreeViewItem节点添加图标后再加header

    1.需要实现的效果如图 2.解决方案 1).给TreeViewItem中添加children,children为包含一个stackpanel,在stackpanel中包含Image和TextBlock ...

  10. 史上最全Winform中使用ZedGraph教程与资源汇总整理(附资源下载)

    场景 C#窗体应用中使用ZedGraph曲线插件绘制图表: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99716066 Win ...