文本框 12种炫酷HTML5 SVG和CSS3表单浮动标签特效_css炫酷输入框特效-优快云博客

这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果，使用SVG和CSS3来制作完成。这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成，一部分则使用SVG来制作变形动画。

在前面已经发表了一篇关于SVG浮动标签的文章：14种CSS3炫酷表单input输入框美化效果。这篇文章中的浮动标签效果是它的一些补充，在原来14种效果的基础上有增加了12种更加炫酷的效果。它们的制作原理都基本相同，你可以参考前一篇文章来了解制作方法。

这些效果在所有最新版的现代浏览器中都测试通过，但是可能某些旧的浏览器会不支持这些效果。

这里写图片描述

使用方法
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">
    <