这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成。这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成,一部分则使用SVG来制作变形动画。
在前面已经发表了一篇关于SVG浮动标签的文章:14种CSS3炫酷表单input输入框美化效果。这篇文章中的浮动标签效果是它的一些补充,在原来14种效果的基础上有增加了12种更加炫酷的效果。它们的制作原理都基本相同,你可以参考前一篇文章来了解制作方法。
这些效果在所有最新版的现代浏览器中都测试通过,但是可能某些旧的浏览器会不支持这些效果。
使用方法
HTML结构
这一组浮动标签特效最大的特点就是引入了SVG,使用SVG来制作各种图形变形动画,其中“SHOKO”的效果如下图所示:
这个效果的HTML结构如下:
Player Name
可以看到,两条线是使用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); }
当input输入框聚焦的时候,使用“+”选择器来选择相邻的文本,并使用transform来对它们进行动画。
.input__field--shoko:focus + .input__label--shoko,
.input--filled .input__label--shoko { color:#A58282; -webkit-transform:translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1); transform:translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1); }
同时,使用“~”选择器来选择SVG线条,并使它们产生波浪效果。
.input__field--shoko:focus ~ .graphic--shoko,
.input--filled .graphic--shoko { stroke:#A58282; -webkit-transform:translate3d(-66.6%, 0, 0); transform:translate3d(-66.6%, 0, 0); }
Demo及源码下载,更多内容