首先我們把背景插入進去，在html頁面body板塊中，新增幾個div
好了，已經插入進去了，那麼現在就要對修飾。為了使能足夠大覆蓋頁面，則div中可以有background-size: cover;滿足你的需求。而下面一步，則是最重要的環節–css動畫的設計（在div class=」bgk」中進行）
-webkit-animation-name: kenburns; /*-animation-name:為@keyframes 動畫規定名稱,必須與-animation-duration同時使用，否則無動畫效果*/
animation-name: kenburns;
-webkit-animation-duration: 16s; /*定義動畫完成乙個週期所需時間*/
animation-duration: 16s;
-webkit-animation-timing-function
: linear;
animation-timing-function
: linear;
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)
.bgk-image
:nth-child(2)
/*..........................*/
@-webkit-keyframes kenburns-1
27.861%
80.435%
100%
}/*................*/
前乙個環節完成了背景的動態變換，那麼現在我們就需要在背景上實現表單的呈現，首先你得新增乙個表單在頁面中
class="form_login_div">
總的來說就寫成下面這個樣子
.form_login
.form_login
input
[type="text"]
:focus,input
[type="password"]
:focus
終於要完了，最後是對提交按鈕的美化。
margin
:20px auto;
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
注：博主是初學者，有什麼地方不對還請前輩們指出，萬分感謝！
HTML CSS實現動態背景登入頁面
1.實現背景的動態變換 首先在html頁面body板塊中，新增div，如下 再對進行css設計。你要對進行大小定位，那麼以下 肯定要首先編寫 bgk 位置設定ok以後，那麼再對裡面的進行設定。為了使能足夠大覆蓋頁面，則 必須有 background size cover 要實現動態效果，那麼你的cs...
HTML CSS實現小公尺登入介面
html css實現小公尺登入介面qq群 722384575 html部分源 如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 小公尺賬號 登入title rel styleshee...
HTML CSS實現經典登入註冊頁面
2 下面看一下具體的 實現 使用的開發工具是hbuilder，有非常強大的提示功能，推薦 首先是登入介面，我命名為login.html 這在 的跳轉中有作用 有幾個我認為比較重要的地方我直接用 來注釋了，但是小夥伴複製貼上的時候需要把注釋去掉，因為html注釋語法不是這樣的 然後是註冊頁面，我把它命...