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

偏执的太偏执、 2022-08-07 09:58 2阅读 0赞

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

[![110735wez9xc4jw4zr22u9.jpg][]][110735wez9xc4jw4zr22u9.jpg]

[在线演示][Link 1]

下载：[201503191554.zip][]

使用方法

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

[![110631kt0mbq662qqtuz22.gif][]][110631kt0mbq662qqtuz22.gif]

这个效果的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.  \}

复制代码

[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[110735wez9xc4jw4zr22u9.jpg]: http://www.html5cn.org/data/attachment/forum/201503/20/110735wez9xc4jw4zr22u9.jpg
[Link 1]: http://www.htmleaf.com/Demo/201503191545.html
[201503191554.zip]: http://www.html5cn.org/portal.php?mod=attachment&id=14332
[110631kt0mbq662qqtuz22.gif]: http://www.html5cn.org/data/attachment/forum/201503/20/110631kt0mbq662qqtuz22.gif