原创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. [数组] Leetcode 189.旋转数组

  2. Codeforces Round #586 (Div. 1 + Div. 2)

    传送门 A. Cards 记录一下出现的个数就行. Code #include <bits/stdc++.h> #define MP make_pair #define fi first ...

  3. acwing 2 零一背包问题

    地址 https://www.acwing.com/problem/content/description/2/ 题目描述有 N 件物品和一个容量是 V 的背包.每件物品只能使用一次. 第 i 件物品 ...

  4. 2019CSP-J/S受虐记

    emmmm...... 今年noip很波折,我从7月开始准备 但CCF居然停了noip,这搞得我很迷茫,CCF你在干什么! 然后又恢复了,这有搞得我很懵逼?(还改名叫csp了) 就换了个名,CCF你搞 ...

  5. python执行shell实时输出

    1.使用readline可以实现 import subprocess def run_shell(shell): cmd = subprocess.Popen(shell, stdin=subproc ...

  6. 玩下PHP的分词，最近有这个需求

    找了个地方 下载代码 我是在这里下载的 https://www.jb51.net/codes/65593.html 1 下载完毕后  打开是这样的文件 2  先把代码集成到thinkphp3.2.3里 ...

  7. RabbitMQ的交换器Exchange之direct（发布与订阅 完全匹配）

    1.交换器.用来接收生产者发送的消息并将这些消息路由给服务器中的队列.三种常用的交换器类型,a.direct(发布与订阅 完全匹配).b.fanout(广播).c.topic(主题,规则匹配). 2. ...

  8. 接口的 COM 组件调用 QueryInterface 因以下错误而失败: 库没有注册。

    这个问题原因是因为安装了高版本的office然后卸载掉,又安装了低版本的office导致的. 博主是 office2016卸载后,安装了office2013. EXCEL报错信息为: 无法将类型为“M ...

  9. ls用法

    常用 ll -h  大小直接显示K,M,G 语 法:ls [-1aAbBcCdDfFgGhHiklLmnNopqQrRsStuUvxX][-I <范本样式>][-T <跳格字数> ...

  10. Java生鲜电商平台-促销系统的架构设计与源码解析

    Java生鲜电商平台-促销系统的架构设计与源码解析 说明:本文重点讲解现在流行的促销方案以及源码解析,让大家对促销,纳新有一个深入的了解与学习过程. 促销系统是电商系统另外一个比较大,也是比较复杂的系 ...