前端小项目之输入框

前置知识学习：

​​input​​​ 标签中的​​placeholder​​属性：字面意义是占位符，作用是作为输入时预期值的提示信息，当输入字段为空会自动显示，当在字段获得焦点时消失。

1. f o r m form form表单包括4个元素

标题，用户名，密码，登录

2. f o r m form form盒子定位到浏览器中心。

设置用户名和密码的获取焦点的过渡动画。

设置登录的过渡动画。

移动盒子到浏览器中心的基本操作：

position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

边框设置为圆角，设置动画过渡时间

border-radius: 24px;
            /* 增加圆角 */
            transition: 0.25s;
            /* 平滑过渡的时间 */

f o c u s , h o v e r focus,hover focus,hover 当获取焦点，当鼠标移动上面时进行的操作。

效果图：

前端小项目之输入框_用户名

真好看，等我玩会Github，就上传上去源码.

Update:

Code 已经上传到了我的Github上面

​​传送门​​