如何創建一個帶有佔位符動畫的表單？

Question

我正在嘗試創建一個類似於SEND GRID的表單 我不確定他們使用了哪些技術。谷歌給了我一些關於MaterialsCSS的信息。使用它很好嗎？

任何人都可以指導我嗎？

Answer 1

純粹的CSS3會幫助你很多！

.input { 
 
    position: relative; 
 
    z-index: 1; 
 
    display: inline-block; 
 
    margin: 1em; 
 
    max-width: 350px; 
 
    width: calc(100% - 2em); 
 
    vertical-align: top; 
 
} 
 
.input__field { 
 
    position: relative; 
 
    display: block; 
 
    float: right; 
 
    padding: 0.8em; 
 
    width: 60%; 
 
    border: none; 
 
    border-radius: 0; 
 
    background: #f0f0f0; 
 
    color: #aaa; 
 
    font-weight: 400; 
 
    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    -webkit-appearance: none; 
 
    /* for box shadows to show on iOS */ 
 
} 
 
.input__field:focus { 
 
    outline: none; 
 
} 
 
.input__label { 
 
    display: inline-block; 
 
    float: right; 
 
    padding: 0 1em; 
 
    width: 40%; 
 
    color: #696969; 
 
    font-weight: bold; 
 
    font-size: 70.25%; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.input__label-content { 
 
    position: relative; 
 
    display: block; 
 
    padding: 1.6em 0; 
 
    width: 100%; 
 
} 
 
.graphic { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    fill: none; 
 
} 
 
.icon { 
 
    color: #ddd; 
 
    font-size: 150%; 
 
} 
 
/* Nariko */ 
 

 
.input--nariko { 
 
    overflow: hidden; 
 
    padding-top: 2em; 
 
} 
 
.input__field--nariko { 
 
    width: 100%; 
 
    background: transparent; 
 
    opacity: 0; 
 
    padding: 0.35em; 
 
    z-index: 100; 
 
    color: #f18292; 
 
} 
 
.input__label--nariko { 
 
    width: 100%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    text-align: left; 
 
    color: #8E9191; 
 
    padding: 0 0.5em; 
 
} 
 
.input__label--nariko::before { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 4em; 
 
    top: 100%; 
 
    left: 0; 
 
    background: #fff; 
 
    border-top: 4px solid #9B9F9F; 
 
    -webkit-transform: translate3d(0, -3px, 0); 
 
    transform: translate3d(0, -3px, 0); 
 
    -webkit-transition: -webkit-transform 0.4s; 
 
    transition: transform 0.4s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
 
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
 
} 
 
.input__label-content--nariko { 
 
    padding: 0.5em 0; 
 
    -webkit-transform-origin: 0% 100%; 
 
    transform-origin: 0% 100%; 
 
    -webkit-transition: -webkit-transform 0.4s, color 0.4s; 
 
    transition: transform 0.4s, color 0.4s; 
 
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
 
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); 
 
} 
 
.input__field--nariko:focus, 
 
.input--filled .input__field--nariko { 
 
    cursor: text; 
 
    opacity: 1; 
 
    -webkit-transition: opacity 0s 0.4s; 
 
    transition: opacity 0s 0.4s; 
 
} 
 
.input__field--nariko:focus + .input__label--nariko::before, 
 
.input--filled .input__label--nariko::before { 
 
    -webkit-transition-delay: 0.05s; 
 
    transition-delay: 0.05s; 
 
    -webkit-transform: translate3d(0, -3.3em, 0); 
 
    transform: translate3d(0, -3.3em, 0); 
 
} 
 
.input__field--nariko:focus + .input__label--nariko .input__label-content--nariko, 
 
.input--filled .input__label-content--nariko { 
 
    color: #6B6E6E; 
 
    -webkit-transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1); 
 
    transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1); 
 
}

<section class="content bgcolor-7"> 
 
    <h2>Input Custom Design</h2> 
 
    <span class="input input--nariko"> 
 
\t \t \t \t \t <input class="input__field input__field--nariko" type="text" id="input-20" /> 
 
\t \t \t \t \t <label class="input__label input__label--nariko" for="input-20"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--nariko">Username</span> 
 
    </label> 
 
    </span> 
 
    <span class="input input--nariko"> 
 
\t \t \t \t \t <input class="input__field input__field--nariko" type="text" id="input-21" /> 
 
\t \t \t \t \t <label class="input__label input__label--nariko" for="input-21"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--nariko">Website</span> 
 
    </label> 
 
    </span> 
 
    <span class="input input--nariko"> 
 
\t \t \t \t \t <input class="input__field input__field--nariko" type="text" id="input-22" /> 
 
\t \t \t \t \t <label class="input__label input__label--nariko" for="input-22"> 
 
\t \t \t \t \t \t <span class="input__label-content input__label-content--nariko">Invitation Code</span> 
 
    </label> 
 
    </span> 
 
</section>

只是HTML5，CSS3和現代瀏覽器試試這個&編輯，你可以......