新建html文档。

准备好需要用到的背景图片。

书写hmtl代码。 

书写css代码。.form-4 { /* Size and position */width: 300px; margin: 60px auto 30px; padding: 10px; position: relative; /* Font styles */font-family: 'Raleway', 'Lato', Arial, sans-serif; color: white; text-shadow: 0 2px 1px rgba(0,0,0,0.3); }.form-4 h1 { font-size: 22px; padding-bottom: 20px; }.form-4 input[type=text], .form-4 input[type=password] {width: 100%; padding: 8px 4px 8px 10px; margin-bottom: 15px; border: 1px solid #4e3043; border: 1px solid rgba(78,48,67, 0.8); background: rgba(0,0,0,0.15); border-radius: 2px; box-shadow: 0 1px 0 rgba(255,255,255,0.2),  inset 0 1px 1px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;font-family: 'Raleway', 'Lato', Arial, sans-serif; color: #fff; font-size: 13px; }.form-4 input::-webkit-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15);} .form-4 input:-moz-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15);} .form-4 input:-ms-input-placeholder { color: rgba(37,21,26,0.5); text-shadow: 0 1px 0 rgba(255,255,255,0.15);}.form-4 input[type=text]:hover, .form-4 input[type=password]:hover { border-color: #333; }.form-4 input[type=text]:focus, .form-4 input[type=password]:focus, .form-4 input[type=submit]:focus { box-shadow: 0 1px 0 rgba(255,255,255,0.2),  inset 0 1px 1px rgba(0,0,0,0.1),  0 0 0 3px rgba(255,255,255,0.15); outline: none; }

书写并添加js代码。JS可以在网上下载

代码整体结构。

查看效果。