先看下效果
q.gif
废话不多说直接上代码:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- input 特效
- </title>
- <style>
- div{ display: inline-block; position: relative; /* 设置相对定位为绝对定位做参照 */ }
- input{ outline: none; } input ~ span{ position: absolute; /* 绝对定位以 div
- 为参照 */ bottom: 0; left: 0; right: 0; height: 3px; background: #1b809e;
- transform: scaleX(0); /*X 轴缩放 0*/ transform-origin: right center; /* 从
- X 轴右侧开始 */ transition: transform 0.3s ease-out; } input:focus ~ span{ transform:
- scaleX(1); /*X 轴缩放正常大小 */ transform-origin: left center; /* 从 X 轴左侧开始 */
- }
- </style>
- </head>
- <body>
- <div>
- <input type="text">
- <span>
- </span>
- </div>
- </body>
- </HTML>
这里顺便说下绝对定位是以最近的已经定位的父级做参照如果没有就是以 Body 做参照.
来源: http://www.jianshu.com/p/057bc3f36c2d