12種炫酷HTML5 SVG和CSS3表單浮動標籤特效

這是一組效果很是炫酷的HTML5 SVG和CSS3表單浮動標籤特效。這組浮動標籤特效共12種效果，使用SVG和CSS3來製做完成。這些浮動標籤效果部分在元素的僞元素上使用CSS transitions和CSS animations完成，一部分則使用SVG來製做變形動畫。

在線預覽   源碼下載

HTML結構

這一組浮動標籤特效最大的特色就是引入了SVG，使用SVG來製做各類圖形變形動畫，其中「SHOKO」的效果以下圖所示：

這個效果的HTML結構以下：

<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>                

能夠看到，兩條線是使用SVG的元素來製做的，後面將使用CSS來對它們進行變形動畫。

CSS樣式

在樣式設計上，首先給標籤文本和input輸入框及SVG線條一些基本的樣式：

.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