my input

by uto usui

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<h1 class="h1">my input</h1>

<div class="wrap">
	<div class="inner">
		<input class="input" type="text" placeholder="name">
		<input class="input" type="tel" placeholder="tel">
	</div>
</div>

SCSS

body {
	width: 100%;
  min-height: 100vh;
	padding-bottom: 150px;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
}


.h1 {
  margin: 2em;
  font-family: 'Dancing Script', cursive;
  color: rgba(white, .85);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}


.inner {
	min-width: 300px;
}

@keyframes input-wave {
  from {
    background-position: 0px bottom
  }

  to {
    background-position: 18px bottom
  }
}

.input {
  display: block;
	width: 100%;
	padding: 0 0 .5em;
  font-size: 2rem;
	font-family: 'Dancing Script', cursive;
	color: rgba(white,.9);
  letter-spacing: 0.05em;
  background: none;
  border: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAA7UlEQVQoU63RvS6EQRTG8d9Bo0An3INGqLdyExIXQCJCITqNiEh2dRKFxhUoxA24CVGsRIlC5yOKI7MZyesNsRHTzTnP+c9zngn/dCIzL7AZEf2/MDNzCQcFlHjD4aAQ8ToMMDNn0cNy0RfQPabr8C02IuLyJ1hmjmIN+5isun4BTWC3rIex2jjHVkTcNYGZuYgTLNT6E3ZwGp/CzJzDMTq19ow9HGG8OihORmr/DNsR8ThYrfViua+g21j3BlOYqdprrEbEVXP2C6jhrgyWDJoOXqrDbkS8tzP8FtQAztdMHrDezuxXR8N8f1vzAVRZR6b5NCddAAAAAElFTkSuQmCC");
  background-repeat: repeat-x;
  background-position: 0 bottom;
  animation: input-wave 0.4s linear infinite;
	//
	+ .input {
		margin-top: 1em;
	}
	//
	&:focus {
		animation: 0;
	}
}

::-webkit-input-placeholder {
  text-transform: uppercase;
  color: rgba(white,.6);
  font-weight: 600;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();