css+div实现placeholder点击上移酷黑表单效果代码-html代码-BFW代码库

css+div实现placeholder点击上移酷黑表单效果代码

代码语言：html

代码描述：css+div实现placeholder点击上移酷黑表单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">




    <style>
        body {
          align-items: center;
          background-color: #000;
          display: flex;
          justify-content: center;
          height: 100vh;
        }
        
        .form {
          background-color: #15172b;
          border-radius: 20px;
          box-sizing: border-box;
          height: 500px;
          padding: 20px;
          width: 320px;
        }
        
        .title {
          color: #eee;
          font-family: sans-serif;
          font-size: 36px;
          font-weight: 600;
          margin-top: 30px;
        }
        
        .subtitle {
          color: #eee;
          font-family: sans-serif;
          font-size: 16px;
          font-weight: 600;
          margin-top: 10px;
        }
        
        .input-container {
          height: 50px;
          position: relative;
          width: 100%;
        }
        
        .ic1 {
          margin-top: 40px;
        }
        
        .ic2 {
          margin-top: 30px;
        }
        
        .input {
          background-color: #303245;
          border-radius: 12px;
          border: 0;
          box-sizing: border-box;
          color: #eee;
          font-size: 18px;
          height: 100%;
          outline: 0;
          padding: 4px 20px 0;
          width: 100%;
        }
        
        .cut {
          background-color: #15172b;
          border-radius: 10px;
          height: 20px;
          left: 20px;
          position: absolute;
          top: -20px;
          transform: translateY(0);
          transition: transform 200ms;
          width: 76px;
        }
        
        .cut-short {
          width: 50px;
        }
        
        .input:focus ~ .cut,
        .input:not(:placeholder-shown) ~ .cut {
          transform: translateY(8px);
        }
        
        .placeholder {
          color: #65657b;
          font-family: sans-serif;
          left: 20px;
          line-height: 14px;
          pointer-events: none;
          position: absolute;
          transform-origin: 0 50%;
          transition: transform 200ms, color 200ms;
          top: .........完整代码请登录后点击上方下载按钮下载查看