登錄頁面有一個背景，會大大增加人們的視覺享受，但是登錄頁面除了靜態頁面還有動態頁面登錄，本文主要介紹了HTML+CSS實現動態背景登錄頁面的相關資料,需要的朋友可以參考下，希望能幫助大家。
1. 實作背景圖片的動態變換
首先在HTML頁面body板塊中，加入圖片p，程式碼如下：
再對圖片進行css設計。你要對圖片進行大小定位，那麼以下程式碼肯定要先寫：
`.bgk { margin: auto; position: absolute; width: 1366px; height: 672px; overflow: hidden; /*溢出部分隐藏*/ }`
位置設定ok以後，那麼再對裡面的圖片進行設定。為了讓圖片能足夠大覆蓋頁面，則程式碼必須有background-size: cover;
要實現動態效果，那麼你的css程式碼中必須有動畫的設計：
-webkit-animation-name: kenburns; /*-animation-name:为@keyframes 动画规定名称,必须与-animation-duration同时使用，否则无动画效果*/ animation-name: kenburns; /*或者：后面值为需要绑定到选择器上的keyframe名称*/ -webkit-animation-duration: 16s; /*定义动画完成一个周期所需时间*/ animation-duration: 16s; -webkit-animation-timing-function: linear; /*规定动画从头到尾以相同速度播放，还有其他几个速度值*/ animation-timing-function: linear; -webkit-animation-iteration-count: infinite; /*规定动画播放次数，infinite为无限次*/ animation-iteration-count: infinite; -webkit-transform: scale(1.2); /*规定动画的缩放特效，scale：规定2D缩放*/ transform: scale(1.2); -webkit-filter: blur(10px); /*定义图片的模糊程度，显示为毛玻璃效果*/ filter: blur(10px);
在綁定每個子元素選擇器，有幾張圖片就綁定幾個選擇器：
.bgk-image:nth-child(1) { -webkit-animation-name: kenburns-1; /*选择器上的名称*/ animation-name: kenburns-1; z-index: 3; /*动画堆叠顺序，值越大表示越先播放，离用户越近*/ } .bgk-image:nth-child(2) { -webkit-animation-name: kenburns-2; animation-name: kenburns-2; z-index: 2; } .bgk-image:nth-child(3) { -webkit-animation-name: kenburns-3; animation-name: kenburns-3; z-index: 1; } .bgk-image:nth-child(4) { -webkit-animation-name: kenburns-4; animation-name: kenburns-4; z-index: 0; }
創建好選擇器以後，你就可以預覽你的動態背景圖片變換了
2. 對登入表單的設計
在先前HTML頁面中繼續新增一個表單
新增完表單之後，就要進行表單的樣式設計。首先你得對表單規定一個圈子，限制它的寬度和高度
.form_login{ margin: auto; width:700px; height: 480px; top: 90px; left: 333px; position: absolute; border-radius: 15px; background: rgba(216,216,216,0.5); /*设置form表单透明度*/ text-align: center; overflow: hidden; }
然後對表單裡面的各個label進行定位和樣式設計，這裡可以自由設計。
對輸入框的設計，我只貼出主要樣式代碼
outline:none; /*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/ border:1px solid rgba(0,0,0,.49); /*输入框边框的大小，实线，rgba（red,green,blue,a为透明度）,透明度处于0-1之间*/ -webkit-background-clip: padding-box; /*background-clip 规定背景的绘制区域,padding-box为内容被裁减到内边距框*/ background-clip: padding-box; background:rgba(216,216,216,0.4) ; border-radius:6px; /*对输入框进行圆角*/ padding:7px; /*输入框中光标位置*/
當聚焦輸入框的時候，可以增加一點絢麗色彩
.form_login input[type="text"]:focus,input[type="password"]:focus{ -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s; /*对边框颜色的逐步过渡高亮显示，后面是对阴影的逐步过渡*/ border-color:rgba(255,128,0,.75); }
最後進行提交按鈕的設計
text-shadow:0px -1px 0px #5b6ddc; /*文字阴影设置*/ outline:none; border:1px solid rgba(0,0,0,0.49); /*按钮边框颜色与透明度设置*/ -webkit-background-clip: padding-box; /*规定内容的绘制区域，padding-box为内边框距*/ background-clip: padding-box; border-radius:6px; cursor:pointer; /*光标形状，pointer为一只手的形状*/ background-color:#768ee4; /*按钮背景颜色*/
當滑鼠放在提交按鈕上面時，你可以適當地進行一些動畫效果設計
.form_login input[type="submit"]:hover{ background-color:#5f73e9; background-image:-webkit-linear-gradient(bottom,#5f73e9 0%,#859bef 100%); background-image:-moz-linear-gradient(bottom,#5f73e9 0%,#859bef 100%); background-image:-ms-linear-gradient(bottom,#5f73e9 0%,#859bef 100%); background-image:-o-linear-gradient(bottom,#5f73e9 0%,#859bef 100%); -webkit-box-shadow: inset 0px 1px 0px #aab9f4; /*当鼠标放在按钮上个时边框的阴影*/ box-shadow: inset 0px 1px 0px #aab9f4; margin-top:22px; }
最後整個設計完成，你可以看見你最終的效果了
相關建議：
基於CSS3動態背景登入框代碼_html/css_WEB-ITnose
#以上是實例詳解HTML、CSS動態背景登入頁面的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
