12 cool HTML5 SVG and CSS3 form floating tag effects, html5css3

12 cool HTML5 SVG and CSS3 form floating tag effects, html5css3

This is a set of very cool HTML5 SVG and CSS3 form floating tag effects. This set of floating tag effects has 12 effects, which are produced using SVG and CSS3. These floating tag effects are partially completed on the pseudo elements of the element using CSS transitions and CSS animations, while some use SVG to make deformation animations.

Download Online Preview source code

HTML Structure

The biggest feature of this set of floating label effects is the introduction of SVG, which is used to create various graphic deformation animations. The effect of "SHOKO" is shown in:

The HTML structure of this effect is as follows:

<span class="input input--shoko">  <input class="input__field input__field--shoko" type="text" id="input-4" />  <label class="input__label input__label--shoko" for="input-4">    <span class="input__label-content input__label-content--shoko">Player Name</span>  </label>  <svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">    <path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>    <path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>  </svg></span>                

We can see that the two lines are produced using SVG elements, and CSS will be used later to perform deformation animation on them.

CSS style

In Style Design, we first give some basic styles to the label text and input boxes and SVG lines:

.input--shoko {  overflow: hidden;  padding-bottom: 2.5em;} .input__field--shoko {  padding: 0;  margin-top: 1.2em;  width: 100%;  background: transparent;  color: #fff;  font-size: 1.55em;} .input__label--shoko {  position: absolute;  top: 2em;  left: 0;  display: block;  width: 100%;  text-align: left;  padding: 0em;  text-transform: uppercase;  letter-spacing: 1px;  color: #A09C9C;  pointer-events: none;  -webkit-transform-origin: 0 0;  transform-origin: 0 0;  -webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s;  transition: transform 0.2s 0.1s, color 0.3s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;} .graphic--shoko {  stroke: #A09C9C;  pointer-events: none;  stroke-width: 2px;  top: 1.25em;  bottom: 0px;  height: 3.275em;  -webkit-transition: -webkit-transform 0.7s, stroke 0.7s;  transition: transform 0.7s, stroke 0.7s;  -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);  transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);}                 

Via: http://www.w2bc.com/Article/30052