【CSDN編譯】導(dǎo)讀：有開發(fā)者表示，HTML5將給個(gè)人開發(fā)者帶來更多機(jī)遇。下面的稿件詳細(xì)描述了一個(gè)唯美的動(dòng)畫效果，它實(shí)現(xiàn)了在同一個(gè)頁面中進(jìn)行登錄表單和注冊表單的轉(zhuǎn)換。這些效果，完全由HTML5和CSS3實(shí)現(xiàn)。文章后面附上了三種不同風(fēng)格的顯示轉(zhuǎn)換效果、以及源碼下載。既可為網(wǎng)頁瘦身，又可實(shí)現(xiàn)漂亮的網(wǎng)頁效果，快快收藏吧。
這篇稿件將描述如何在HTML5中，使用CSS3的目標(biāo)偽類“:target”來創(chuàng)建注冊和登錄兩個(gè)表單、并實(shí)現(xiàn)它們在同一個(gè)頁面中的顯示轉(zhuǎn)換。此演示目的是向用戶展示從登錄表單點(diǎn)擊標(biāo)注有“Join us”的按鈕鏈接到注冊表單的動(dòng)畫效果。我們將在文章末尾附上本實(shí)例的源碼下載地址。
點(diǎn)擊右下方Join us按鈕，登錄表單隱藏，注冊表單顯現(xiàn)
請注意，此實(shí)例只用于演示目的，它只能在支持“:target”偽類的瀏覽器中正常顯示出來。
HTML部分
在HTML中定義有兩個(gè)表單，其中一個(gè)表單已用CSS隱藏使之不可見。來看看代碼：
<div?id="container_demo"?>??????????<a?class="hiddenanchor"?id="toregister"></a>?????<a?class="hiddenanchor"?id="tologin"></a>?????<div?id="wrapper">?????????<div?id="login"?class="animate?form">?????????????<form??action="mysuperscript.php"?autocomplete="on">?????????????????<h1>Log?in</h1>?????????????????<p>?????????????????????<label?for="username"?class="uname"?data-icon="u"?>?Your?email?or?username?</label>?????????????????????<input?id="username"?name="username"?required="required"?type="text"?placeholder="myusername?or?mymail@mail.com"/>?????????????????</p>?????????????????<p>?????????????????????<label?for="password"?class="youpasswd"?data-icon="p">?Your?password?</label>?????????????????????<input?id="password"?name="password"?required="required"?type="password"?placeholder="eg.?X8df!90EO"?/>?????????????????</p>?????????????????<p?class="keeplogin">?????????????????????<input?type="checkbox"?name="loginkeeping"?id="loginkeeping"?value="loginkeeping"?/>?????????????????????<label?for="loginkeeping">Keep?me?logged?in</label>?????????????????</p>?????????????????<p?class="login?button">?????????????????????<input?type="submit"?value="Login"?/>?????????????????</p>?????????????????<p?class="change_link">?????????????????????Not?a?member?yet???????????????????????<a?href="#toregister"?class="to_register">Join?us</a>?????????????????</p>?????????????</form>?????????</div>???????????<div?id="register"?class="animate?form">?????????????<form??action="mysuperscript.php"?autocomplete="on">?????????????????<h1>?Sign?up?</h1>?????????????????<p>?????????????????????<label?for="usernamesignup"?class="uname"?data-icon="u">Your?username</label>?????????????????????<input?id="usernamesignup"?name="usernamesignup"?required="required"?type="text"?placeholder="mysuperusername690"?/>?????????????????</p>?????????????????<p>?????????????????????<label?for="emailsignup"?class="youmail"?data-icon="e"?>?Your?email</label>?????????????????????<input?id="emailsignup"?name="emailsignup"?required="required"?type="email"?placeholder="mysupermail@mail.com"/>?????????????????</p>?????????????????<p>?????????????????????<label?for="passwordsignup"?class="youpasswd"?data-icon="p">Your?password?</label>?????????????????????<input?id="passwordsignup"?name="passwordsignup"?required="required"?type="password"?placeholder="eg.?X8df!90EO"/>?????????????????</p>?????????????????<p>?????????????????????<label?for="passwordsignup_confirm"?class="youpasswd"?data-icon="p">Please?confirm?your?password?</label>?????????????????????<input?id="passwordsignup_confirm"?name="passwordsignup_confirm"?required="required"?type="password"?placeholder="eg.?X8df!90EO"/>?????????????????</p>?????????????????<p?class="signin?button">?????????????????????<input?type="submit"?value="Sign?up"/>?????????????????</p>?????????????????<p?class="change_link">?????????????????????Already?a?member???????????????????????<a?href="#tologin"?class="to_register">?Go?and?log?in?</a>?????????????????</p>?????????????</form>?????????</div>???????</div>?</div>? 可以看到在上面的代碼中，使用了一些HTML5不錯(cuò)的新功能。比如在input type方面，實(shí)現(xiàn)密碼自動(dòng)隱藏用戶鍵入點(diǎn)替換(當(dāng)然這取決于瀏覽器是否支持)。用瀏覽器檢查輸入類型的電子郵件是否是正確格式等。
有兩個(gè)環(huán)節(jié)要記住。你可能已經(jīng)注意到表單項(xiàng)部的兩個(gè)<a href>鏈接。當(dāng)我們點(diǎn)擊并觸發(fā)目標(biāo)偽類時(shí)，我們就能通過“錨”標(biāo)記（HTML中一種跳轉(zhuǎn)定位方式，一般用于長網(wǎng)頁）在原網(wǎng)頁中跳到合適的位置，而不用另打開一個(gè)新網(wǎng)頁。第二個(gè)動(dòng)作與所用圖標(biāo)、字體相關(guān)。我們?yōu)轱@示的圖標(biāo)使用一個(gè)數(shù)據(jù)屬性。在HTML中通過設(shè)置“icon_character”，就可以選擇一個(gè)CSS來控制所有的圖標(biāo)風(fēng)格樣式。（這里對于錨標(biāo)記的使用可能會(huì)有些糊涂，但看到后面就會(huì)明白了。）
CSS部分
這里將會(huì)出現(xiàn)一些CSS3的技巧代碼，請注意，可能有的瀏覽器目前還不支持CSS3而無法正常顯示。
兩個(gè)CSS定義。（后面會(huì)說明為什么要定義兩個(gè)CSS的原因。）
首先，為需要顯示的區(qū)域定義一個(gè)外觀。
#subscribe,?#login{?????position:?absolute;?????top:?0px;?????width:?88%;?????padding:?18px?6%?60px?6%;?????margin:?0?0?35px?0;?????background:?rgb(247,?247,?247);?????border:?1px?solid?rgba(147,?184,?189,0.8);?????box-shadow:?????????0pt?2px?5px?rgba(105,?108,?109,??0.7),?????????0px?0px?8px?5px?rgba(208,?223,?226,?0.4)?inset;?????border-radius:?5px;?}?#login{?????z-index:?22;?}? 這里定義了投影，以及如文章開始的那張圖上所示的藍(lán)色輝光。并賦值z-index為22。
下面是關(guān)于背景圖片樣式的代碼：
/****?general?text?styling?****/?#wrapper?h1{?????font-size:?48px;?????color:?rgb(6,?106,?117);?????padding:?2px?0?10px?0;?????font-family:?'FranchiseRegular','Arial?Narrow',Arial,sans-serif;?????font-weight:?bold;?????text-align:?center;?????padding-bottom:?30px;?}???/**?For?the?moment?only?webkit?supports?the?background-clip:text;?*/?#wrapper?h1{?????background:?????-webkit-repeating-linear-gradient(-45deg,?????????rgb(18,?83,?93)?,?????????rgb(18,?83,?93)?20px,?????????rgb(64,?111,?118)?20px,?????????rgb(64,?111,?118)?40px,?????????rgb(18,?83,?93)?40px);?????-webkit-text-fill-color:?transparent;?????-webkit-background-clip:?text;?}???#wrapper?h1:after{?????content:'?';?????display:block;?????width:100%;?????height:2px;?????margin-top:10px;?????background:?????????linear-gradient(left,?????????????rgba(147,184,189,0)?0%,?????????????rgba(147,184,189,0.8)?20%,?????????????rgba(147,184,189,1)?53%,?????????????rgba(147,184,189,0.8)?79%,?????????????rgba(147,184,189,0)?100%);?}? 注意，由于目前只有WebKit瀏覽器支持background-clip: text，為了在適應(yīng)不同瀏覽器，還要?jiǎng)?chuàng)建一個(gè)H1標(biāo)題樣式：帶條紋背景的文本樣式。由于background-clip: text只適用于WebKit，所以這里用WebKit作前綴，這也是為什么要把CSS分成兩部分，并只使用來定義的原因。用WebKit作前綴是不太好的做法，僅用于這種演示示例。現(xiàn)在，WebKit的文本顏色透明度屬性可以派上用場了：它可以實(shí)現(xiàn)透明效果的背景樣式。
表單上，標(biāo)題下方那條水平線的樣式也由一個(gè)after偽類控制。這里使用了一個(gè)2px的高度和兩邊淡出的效果。
現(xiàn)在，接著進(jìn)行樣式定義。
/****?advanced?input?styling?****/?/*?placeholder?*/?::-webkit-input-placeholder??{?????color:?rgb(190,?188,?188);?????font-style:?italic;?}?input:-moz-placeholder,?textarea:-moz-placeholder{?????color:?rgb(190,?188,?188);?????font-style:?italic;?}?input?{???outline:?none;?}? 為輸入樣式定義outline屬性，以便用戶能迅速輸入正確信息。如果你不打算定義outline，那也應(yīng)該使用 :active 和 :focus來定義這些輸入樣式的狀態(tài)。
/*?all?the?input?except?submit?and?checkbox?*/?#wrapper?input:not([type="checkbox"]){?????width:?92%;?????margin-top:?4px;?????padding:?10px?5px?10px?32px;?????border:?1px?solid?rgb(178,?178,?178);?????box-sizing?:?content-box;?????border-radius:?3px;?????box-shadow:?0px?1px?4px?0px?rgba(168,?168,?168,?0.6)?inset;?????transition:?all?0.2s?linear;?}?#wrapper?input:not([type="checkbox"]):active,?#wrapper?input:not([type="checkbox"]):focus{?????border:?1px?solid?rgba(91,?90,?90,?0.7);?????background:?rgba(238,?236,?240,?0.2);?????box-shadow:?0px?1px?4px?0px?rgba(168,?168,?168,?0.9)?inset;?}? 這里我們并不全是用偽類去定義輸入樣式，除了checkbox。因?yàn)閯h除了outline屬性，所以這里使用了 a :focus 和:active 狀態(tài)定義。自從不再為輸入樣式使用:before 和 :after偽類后，就使用圖標(biāo)的label標(biāo)簽進(jìn)行設(shè)置。這里使用了fontomas庫中的一些漂亮圖標(biāo)。還記得data-icon 的屬性嗎？要把信息傳遞到正確的地方。這里使用data-icon=’u’ 來表示用戶， ‘e’ 表示email, ‘p’ 表示密碼。一旦確定的信件，下載字體，用fontsquirrel字體引擎將這些信息轉(zhuǎn)換成@font-face兼容格式。
@font-face?{?????font-family:?'FontomasCustomRegular';?????src:?url('fonts/fontomas-webfont.eot');?????src:?url('fonts/fontomas-webfont.eot?#iefix')?format('embedded-opentype'),??????????url('fonts/fontomas-webfont.woff')?format('woff'),??????????url('fonts/fontomas-webfont.ttf')?format('truetype'),??????????url('fonts/fontomas-webfont.svg#FontomasCustomRegular')?format('svg');?????font-weight:?normal;?????font-style:?normal;?}???/**?the?magic?icon?trick?!?**/?[data-icon]:after?{?????content:?attr(data-icon);?????font-family:?'FontomasCustomRegular';?????color:?rgb(106,?159,?171);?????position:?absolute;?????left:?10px;?????top:?35px;?????width:?30px;?}? 不用為每個(gè)圖標(biāo)指定一個(gè)類，而是使用content: attr(data-icon) 來檢查data-icon屬性信息。所以只需要定義字體、顏色和位置。
現(xiàn)在，為兩個(gè)表單中的提交按鈕定義樣式。
/*styling?both?submit?buttons?*/?#wrapper?p.button?input{?????width:?30%;?????cursor:?pointer;?????background:?rgb(61,?157,?179);?????padding:?8px?5px;?????font-family:?'BebasNeueRegular','Arial?Narrow',Arial,sans-serif;?????color:?#fff;?????font-size:?24px;?????border:?1px?solid?rgb(28,?108,?122);?????margin-bottom:?10px;?????text-shadow:?0?1px?1px?rgba(0,?0,?0,?0.5);?????border-radius:?3px;?????box-shadow:?????????0px?1px?6px?4px?rgba(0,?0,?0,?0.07)?inset,?????????0px?0px?0px?3px?rgb(254,?254,?254),?????????0px?5px?3px?3px?rgb(210,?210,?210);?????transition:?all?0.2s?linear;?}?#wrapper?p.button?input:hover{?????background:?rgb(74,?179,?198);?}?#wrapper?p.button?input:active,?#wrapper?p.button?input:focus{?????background:?rgb(40,?137,?154);?????position:?relative;?????top:?1px;?????border:?1px?solid?rgb(12,?76,?87);?????box-shadow:?0px?1px?6px?4px?rgba(0,?0,?0,?0.2)?inset;?}?p.login.button,?p.signin.button{?????text-align:?right;?????margin:?5px?0;?}? 這里是一個(gè)創(chuàng)建邊框投影的技巧，你可以隨意設(shè)置一條或多條邊框投影。這里使用length value來創(chuàng)建一個(gè)“假”的第二條邊框，寬度為3px，無模糊效果。接著定義復(fù)選框的樣式：
/*?styling?the?checkbox?"keep?me?logged?in"*/?.keeplogin{?????margin-top:?-5px;?}?.keeplogin?input,?.keeplogin?label{?????display:?inline-block;?????font-size:?12px;?????font-style:?italic;?}?.keeplogin?input#loginkeeping{?????margin-right:?5px;?}?.keeplogin?label{?????width:?80%;?}? 為表單使用重復(fù)線性漸變的樣式，以實(shí)現(xiàn)條紋背景效果。
p.change_link{?????position:?absolute;?????color:?rgb(127,?124,?124);?????left:?0px;?????height:?20px;?????width:?440px;?????padding:?17px?30px?20px?30px;?????font-size:?16px?;?????text-align:?right;?????border-top:?1px?solid?rgb(219,?229,?232);?????border-radius:?0?0??5px?5px;?????background:?rgb(225,?234,?235);?????background:?repeating-linear-gradient(-45deg,?????rgb(247,?247,?247)?,?????rgb(247,?247,?247)?15px,?????rgb(225,?234,?235)?15px,?????rgb(225,?234,?235)?30px,?????rgb(247,?247,?247)?30px?????);?}?#wrapper?p.change_link?a?{?????display:?inline-block;?????font-weight:?bold;?????background:?rgb(247,?248,?241);?????padding:?2px?6px;?????color:?rgb(29,?162,?193);?????margin-left:?10px;?????text-decoration:?none;?????border-radius:?4px;?????border:?1px?solid?rgb(203,?213,?214);?????transition:?all?0.4s??linear;?}?#wrapper?p.change_link?a:hover?{?????color:?rgb(57,?191,?215);?????background:?rgb(247,?247,?247);?????border:?1px?solid?rgb(74,?179,?198);?}?#wrapper?p.change_link?a:active{?????position:?relative;?????top:?1px;?}? 現(xiàn)在，我們已經(jīng)定義了兩個(gè)漂亮的樣式了，但在一個(gè)時(shí)間段里，只需要顯示一個(gè)。所以，現(xiàn)在用動(dòng)畫效果來實(shí)現(xiàn)。
創(chuàng)建切換動(dòng)畫
首先是將不透明度設(shè)為0以隱藏表單：
#register{?????z-index:?21;?????opacity:?0;?}? 還記得嗎？前面登錄表單中z-index的值為22。上面這段代碼的動(dòng)作是把z-index的值定義為21，讓它可以處在登錄表單的上一層（指顯示順序，數(shù)字小的顯示在前面）。
重點(diǎn)部分:target目標(biāo)偽類。這里將使用“錨”進(jìn)行兩個(gè)表單間的顯示過渡。“錨”鏈接的一般用法，是在頁面上的兩處實(shí)現(xiàn)跳轉(zhuǎn)。但這里并不希望跳轉(zhuǎn)到別處，只需要表單顯示的切換。這里的訣竅在于表單頂部的兩個(gè)小環(huán)節(jié)中，當(dāng)點(diǎn)擊“錨”標(biāo)記時(shí)，觸發(fā)第一個(gè)表單的顯示設(shè)置“none”。這樣，就避免了任何的頁面跳轉(zhuǎn)。
#toregister:target?~?#wrapper?#register,?#tologin:target?~?#wrapper?#login{?????z-index:?22;?????animation-name:?fadeInLeft;?????animation-delay:?.1s;?}? 當(dāng)點(diǎn)擊登錄表單上的“Join us”按鈕時(shí)，就會(huì)觸發(fā) #toregister，然后通過選擇找到#register，激活動(dòng)畫fadeInLeft。使隱藏的表單慢慢顯現(xiàn)出來，并同時(shí)改變其z-index值，讓這個(gè)表單出現(xiàn)在其它表單的上面。
下面是實(shí)現(xiàn)這種動(dòng)畫樣式的代碼。
.animate{?????animation-duration:?0.5s;?????animation-timing-function:?ease;?????animation-fill-mode:?both;?}?@keyframes?fadeInLeft?{?????0%?{?????????opacity:?0;?????????transform:?translateX(-20px);?????}???????100%?{?????????opacity:?1;?????????transform:?translateX(0);?????}?}? 表單用“disappearing”的動(dòng)畫形式從左邊淡出：
#toregister:target?~?#wrapper?#login,?#tologin:target?~?#wrapper?#register{?????animation-name:?fadeOutLeftBig;?}???@keyframes?fadeOutLeft?{?????0%?{?????????opacity:?1;?????????transform:?translateX(0);?????}???????100%?{?????????opacity:?0;?????????transform:?translateX(-20px);?????}?}? 上面的動(dòng)畫實(shí)現(xiàn)代碼來自Dan Eden的 animate.css，把其中的動(dòng)畫名稱修改為自己的表單對象就可以實(shí)現(xiàn)。里面還有一些其他的自定義動(dòng)畫。
（需要注意的是，有些瀏覽器還不支持background-clip: text。IE9中，過渡和動(dòng)畫效果就無法顯示，IE8及更低版本的瀏覽器還不支持CSS3中的偽類。）
英文原址：tympanus.net
實(shí)例演示地址：
從左開始漸變顯示的動(dòng)畫效果
從左滑動(dòng)呈現(xiàn)的動(dòng)畫效果
從小放大的動(dòng)畫效果
點(diǎn)擊開始源代碼下載
本文為CSDN編譯整理，未經(jīng)允許不得轉(zhuǎn)載。如需轉(zhuǎn)載請聯(lián)系market@csdn.net
轉(zhuǎn)載于:https://www.cnblogs.com/mixer/archive/2012/03/30/2448586.html
總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3构建同页面表单间的动画切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
