原创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. 非法指令(Illegal Instruction)问题定位

    关键词:Illegal Instruction.SIGILL等. 进程在运行过程中会收到SIGILL信号,此类错误是由操作系统发送给进程的. SIGILL是某个进程中的某一句不能被CPU识别指令,这些 ...

  2. CentOS-7-x86_64-Minimal安装后的初始设置

    本文是给0基础的初始linux小白写的,只是方便大家尽快上手掌握使用linux系统,完成当前任务,有一定基础能力的请忽略 接上一篇的安装之后,开始配置linx的一些基本功能 1,第一步,也是最重要的一 ...

  3. linux shell脚本相关知识

    最近的项目中,有一个编写linux shell脚本的任务.由于之前不是很熟悉,在这个过程中遇到了很多困难,查找了很多资料,也收获了很多.下面是linux shell脚本中常用的知识总结. 1基础语法 ...

  4. 移动网络游戏实现流程——并借此阐明pomelo在GitHub上各个项目间的关系

    <!DOCTYPE html> 摘要:本文通过一个简易流程图介绍如何基于Cocos2d-x引擎和pomelo服务器框架开发一个移动网络游戏.并借此阐明pomelo提供的各个项目间的关系. ...

  5. LeetCode 5129. 下降路径最小和 II Minimum Falling Path Sum II

    地址 https://leetcode-cn.com/contest/biweekly-contest-15/problems/minimum-falling-path-sum-ii/ 题目描述给你一 ...

  6. IDEA2019 Win10 Tomcat Server控制台中文乱码的快速解决办法

    原理 Windows10的控制台使用GBK编码,而Tomcat使用UTF-8编码,导致乱码 解决办法 修改$tomcat/conf/logging.properties文件 # 注释这行 java.u ...

  7. STM32 F4xx Fault 异常错误定位指南

    STM32 F407 采用 Cortex-M4 的内核,该内核的 Fault 异常可以捕获非法的内存访问和非法的编程行为.Fault异常能够检测到以下几类非法行为: 总线 Fault: 在取址.数据读 ...

  8. js的事件循环（Event Loop）

    (本文从掘金小册整理) 首先介绍一下几个概念 进程与线程 相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程? 讲到线程,那么肯定也得说一下进程.本质上来说,两个名词都是 CPU 工 ...

  9. 序列化禁止使用Optional

    1: 概论 Optional 是Java8用来改变java引发NPE的解决办法,但是不是绝对的解决办法 2: 例子: 很多博文一上来就给力以下使用例子 @Data public class User ...

  10. php使用inotify扩展监控文件或目录的变化

    一.安装inotify扩展 1.下载inotify扩展源码 https://pecl.php.net/package/inotify 对于php7以上版本,请下载 inotify-2.0.0.tgz. ...