【CSDN編譯】導(dǎo)讀：有開發(fā)者表示，HTML5將給個(gè)人開發(fā)者帶來(lái)更多機(jī)遇。下面的稿件詳細(xì)描述了一個(gè)唯美的動(dòng)畫效果，它實(shí)現(xiàn)了在同一個(gè)頁(yè)面中進(jìn)行登錄表單和注冊(cè)表單的轉(zhuǎn)換。這些效果，完全由HTML5和CSS3實(shí)現(xiàn)。文章后面附上了三種不同風(fēng)格的顯示轉(zhuǎn)換效果、以及源碼下載。既可為網(wǎng)頁(yè)瘦身，又可實(shí)現(xiàn)漂亮的網(wǎng)頁(yè)效果，快快收藏吧。

這篇稿件將描述如何在HTML5中，使用CSS3的目標(biāo)偽類“:target”來(lái)創(chuàng)建注冊(cè)和登錄兩個(gè)表單、并實(shí)現(xiàn)它們?cè)谕粋€(gè)頁(yè)面中的顯示轉(zhuǎn)換。此演示目的是向用戶展示從登錄表單點(diǎn)擊標(biāo)注有“Join us”的按鈕鏈接到注冊(cè)表單的動(dòng)畫效果。我們將在文章末尾附上本實(shí)例的源碼下載地址。

點(diǎn)擊右下方Join us按鈕，登錄表單隱藏，注冊(cè)表單顯現(xiàn)

請(qǐng)注意，此實(shí)例只用于演示目的，它只能在支持“:target”偽類的瀏覽器中正常顯示出來(lái)。

HTML部分

在HTML中定義有兩個(gè)表單，其中一個(gè)表單已用CSS隱藏使之不可見。來(lái)看看代碼：

<div id="container_demo" > 
    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  --> 
    <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í)，我們就能通過(guò)“錨”標(biāo)記（HTML中一種跳轉(zhuǎn)定位方式，一般用于長(zhǎng)網(wǎng)頁(yè)）在原網(wǎng)頁(yè)中跳到合適的位置，而不用另打開一個(gè)新網(wǎng)頁(yè)。第二個(gè)動(dòng)作與所用圖標(biāo)、字體相關(guān)。我們?yōu)轱@示的圖標(biāo)使用一個(gè)數(shù)據(jù)屬性。在HTML中通過(guò)設(shè)置“icon_character”，就可以選擇一個(gè)CSS來(lái)控制所有的圖標(biāo)風(fēng)格樣式。（這里對(duì)于錨標(biāo)記的使用可能會(huì)有些糊涂，但看到后面就會(huì)明白了。）

CSS部分

這里將會(huì)出現(xiàn)一些CSS3的技巧代碼，請(qǐng)注意，可能有的瀏覽器目前還不支持CSS3而無(wú)法正常顯示。

兩個(gè)CSS定義。（后面會(huì)說(shuō)明為什么要定義兩個(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(mì)-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分成兩部分，并只使用來(lái)定義的原因。用WebKit作前綴是不太好的做法，僅用于這種演示示例?，F(xiàn)在，WebKit的文本顏色透明度屬性可以派上用場(chǎng)了：它可以實(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來(lái)定義這些輸入樣式的狀態(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庫(kù)中的一些漂亮圖標(biāo)。還記得data-icon 的屬性嗎？要把信息傳遞到正確的地方。這里使用data-icon=’u’ 來(lái)表示用戶， ‘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) 來(lái)檢查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來(lái)創(chuàng)建一個(gè)“假”的第二條邊框，寬度為3px，無(wú)模糊效果。接著定義復(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)畫效果來(lái)實(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è)表單間的顯示過(guò)渡?！板^”鏈接的一般用法，是在頁(yè)面上的兩處實(shí)現(xiàn)跳轉(zhuǎn)。但這里并不希望跳轉(zhuǎn)到別處，只需要表單顯示的切換。這里的訣竅在于表單頂部的兩個(gè)小環(huán)節(jié)中，當(dāng)點(diǎn)擊“錨”標(biāo)記時(shí)，觸發(fā)第一個(gè)表單的顯示設(shè)置“none”。這樣，就避免了任何的頁(yè)面跳轉(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，然后通過(guò)選擇找到#register，激活動(dòng)畫fadeInLeft。使隱藏的表單慢慢顯現(xiàn)出來(lái)，并同時(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)代碼來(lái)自Dan Eden的 animate.css，把其中的動(dòng)畫名稱修改為自己的表單對(duì)象就可以實(shí)現(xiàn)。里面還有一些其他的自定義動(dòng)畫。

（需要注意的是，有些瀏覽器還不支持background-clip: text。IE9中，過(guò)渡和動(dòng)畫效果就無(wú)法顯示，IE8及更低版本的瀏覽器還不支持CSS3中的偽類。）

英文原址：tympanus.net

實(shí)例演示地址：

從左開始漸變顯示的動(dòng)畫效果

從左滑動(dòng)呈現(xiàn)的動(dòng)畫效果

從小放大的動(dòng)畫效果

點(diǎn)擊開始源代碼下載