12种炫酷HTML5 SVG和CSS3表单浮动标签特效

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

在线演示

下载：201503191554.zip

        使用方法

        HTML结构


        这一组浮动标签特效最大的特点就是引入了SVG，使用SVG来制作各种图形变形动画，其中“SHOKO”的效果如下图所示：

        这个效果的HTML结构如下：

1. <span class="input input--shoko">
   
2.   <input class="input__field input__field--shoko" type="text" id="input-4" />
   
3.   <label class="input__label input__label--shoko" for="input-4">
   
4.     <span class="input__label-content input__label-content--shoko">Player Name</span>
   
5.   </label>
   
6.   <svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
   
7.     <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"/>
   
8.     <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"/>
   
9.   </svg>
   
10. </span>   

复制代码

        可以看到，两条线是使用SVG的<path>元素来制作的，后面将使用CSS来对它们进行变形动画。

        CSS样式

        在样式设计上，首先给标签文本和input输入框及SVG线条一些基本的样式：

1. .input--shoko {
   
2.   overflow: hidden;
   
3.   padding-bottom: 2.5em;
   
4. }
   
5. 
   
6. .input__field--shoko {
   
7.   padding: 0;
   
8.   margin-top: 1.2em;
   
9.   width: 100%;
   
10.   background: transparent;
    
11.   color: #fff;
    
12.   font-size: 1.55em;
    
13. }
    
14. 
    
15. .input__label--shoko {
    
16.   position: absolute;
    
17.   top: 2em;
    
18.   left: 0;
    
19.   display: block;
    
20.   width: 100%;
    
21.   text-align: left;
    
22.   padding: 0em;
    
23.   text-transform: uppercase;
    
24.   letter-spacing: 1px;
    
25.   color: #A09C9C;
    
26.   pointer-events: none;
    
27.   -webkit-transform-origin: 0 0;
    
28.   transform-origin: 0 0;
    
29.   -webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s;
    
30.   transition: transform 0.2s 0.1s, color 0.3s;
    
31.   -webkit-transition-timing-function: ease-out;
    
32.   transition-timing-function: ease-out;
    
33. }
    
34. 
    
35. .graphic--shoko {
    
36.   stroke: #A09C9C;
    
37.   pointer-events: none;
    
38.   stroke-width: 2px;
    
39.   top: 1.25em;
    
40.   bottom: 0px;
    
41.   height: 3.275em;
    
42.   -webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
    
43.   transition: transform 0.7s, stroke 0.7s;
    
44.   -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
    
45.   transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
    
46. }            

复制代码

        当input输入框聚焦的时候，使用“+”选择器来选择相邻的文本，并使用transform来对它们进行动画。

1. .input__field--shoko:focus + .input__label--shoko,
   
2. .input--filled .input__label--shoko {
   
3.   color: #A58282;
   
4.   -webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
   
5.   transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
   
6. }      

复制代码

       同时，使用“~”选择器来选择SVG线条，并使它们产生波浪效果。

1. .input__field--shoko:focus ~ .graphic--shoko,
   
2. .input--filled .graphic--shoko {
   
3.   stroke: #A58282;
   
4.   -webkit-transform: translate3d(-66.6%, 0, 0);
   
5.   transform: translate3d(-66.6%, 0, 0);
   
6. }   

复制代码