For an input field, this is one of the best styles one can have using the 2D vector math library of javascript. This style appears on the box while the user is typing in the input field. This can be achieved using HTML, script math library and CSS styles on your login forms, contact forms, websites, and even on your landing pages. In the HTML, a span element is added in the document. The input keys are added in the javascript for which the animation will be displayed. Next, you need to create a few math functions to create the spray along with the words which are typed in the input field. You can increase the burst of a spray of stimulated particles along the span on input field from left to right and top to bottom. You can see the math for particle stimulation along with the 2D vector class. Source: https://codepen.io/rikschennink/pen/VaqNgx

With google guidelines for the material design, you can have clean, smooth and sleek designs for your web pages. Material designs can be used in all supported versions of Android devices. Further, it will be extended gradually throughout Google’s web ance mobile products. This will provide a consistent UI/UX experience across all the platforms. This is one of the designs following the google guidelines. This snippet is of the form with two inputs. Once you have an input field focused you would experience a transition of the label to the top corner. You can set the position to bottom or top of the labels when the input field is an inactive state. By following the Material Design of Google you would not have to worry about the user experience of the forms on various platforms. This is specially design for Android devices and hence you can check out the responsive behavior. Source: https://codepen.io/chrisoncode/pen/IdGKH

For your quirky responsive website, this is one of the best snippets, with jquery and CSS styling it gives a perfect style to the text added in the text field. This snippet displays the style you can have with the input field and the type’s text. HTML is quite simple with having the input field. Few font styles like “sans-serif”, “cursive” and “serif” can be set once we click on the button link. The CSS sets the styles for the fonts by styling their classes of input and controls. We have one more animation called shake which will animate the input field and text once we apply any of these below fonts. The script is carefully drafted to add or remove animation for the font and also for the shake effect. You can add these type of effect to engage the user on your site. Source:https://codepen.io/Benny29390/pen/aWwybM