我的家園
          
			我的家園
		          		
	
          

          

          

          


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

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

          

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

          請注意，此實例只用于演示目的，它只能在支持“:target”偽類的瀏覽器中正常顯示出來。
          

          HTML部分
          

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

          1. <div id="container_demo" > 
          2.     <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  --> 
          3.     <a class="hiddenanchor" id="toregister"></a> 
          4.     <a class="hiddenanchor" id="tologin"></a> 
          5.     <div id="wrapper"> 
          6.         <div id="login" class="animate form"> 
          7.             <form  action="mysuperscript.php" autocomplete="on"> 
          8.                 <h1>Log in</h1> 
          9.                 <p> 
          10.                     <label for="username" class="uname" data-icon="u" > Your email or username </label> 
          11.                     <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> 
          12.                 </p> 
          13.                 <p> 
          14.                     <label for="password" class="youpasswd" data-icon="p"> Your password </label> 
          15.                     <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
          16.                 </p> 
          17.                 <p class="keeplogin"> 
          18.                     <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
          19.                     <label for="loginkeeping">Keep me logged in</label> 
          20.                 </p> 
          21.                 <p class="login button"> 
          22.                     <input type="submit" value="Login" /> 
          23.                 </p> 
          24.                 <p class="change_link"> 
          25.                     Not a member yet ? 
          26.                     <a href="#toregister" class="to_register">Join us</a> 
          27.                 </p> 
          28.             </form> 
          29.         </div> 
          30.   
          31.         <div id="register" class="animate form"> 
          32.             <form  action="mysuperscript.php" autocomplete="on"> 
          33.                 <h1> Sign up </h1> 
          34.                 <p> 
          35.                     <label for="usernamesignup" class="uname" data-icon="u">Your username</label> 
          36.                     <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> 
          37.                 </p> 
          38.                 <p> 
          39.                     <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> 
          40.                     <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
          41.                 </p> 
          42.                 <p> 
          43.                     <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> 
          44.                     <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> 
          45.                 </p> 
          46.                 <p> 
          47.                     <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> 
          48.                     <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> 
          49.                 </p> 
          50.                 <p class="signin button"> 
          51.                     <input type="submit" value="Sign up"/> 
          52.                 </p> 
          53.                 <p class="change_link"> 
          54.                     Already a member ? 
          55.                     <a href="#tologin" class="to_register"> Go and log in </a> 
          56.                 </p> 
          57.             </form> 
          58.         </div> 
          59.   
          60.     </div> 
          61. </div> 
          

          可以看到在上面的代碼中，使用了一些HTML5不錯的新功能。比如在input type方面，實現(xiàn)密碼自動隱藏用戶鍵入點替換(當然這取決于瀏覽器是否支持)。用瀏覽器檢查輸入類型的電子郵件是否是正確格式等。
          

          有兩個環(huán)節(jié)要記住。你可能已經(jīng)注意到表單項部的兩個<a href>鏈接。當我們點擊并觸發(fā)目標偽類時，我們就能通過“錨”標記（HTML中一種跳轉(zhuǎn)定位方式，一般用于長網(wǎng)頁）在原網(wǎng)頁中跳到合適的位置，而不用另打開一個新網(wǎng)頁。第二個動作與所用圖標、字體相關(guān)。我們?yōu)轱@示的圖標使用一個數(shù)據(jù)屬性。在HTML中通過設(shè)置“icon_character”，就可以選擇一個CSS來控制所有的圖標風格樣式。（這里對于錨標記的使用可能會有些糊涂，但看到后面就會明白了。）
          

          CSS部分
          

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

          兩個CSS定義。（后面會說明為什么要定義兩個CSS的原因。）
          

          首先，為需要顯示的區(qū)域定義一個外觀。
          

          1. #subscribe, 
          2. #login{ 
          3.     position: absolute; 
          4.     top: 0px; 
          5.     width: 88%; 
          6.     padding: 18px 6% 60px 6%; 
          7.     margin: 0 0 35px 0; 
          8.     background: rgb(247, 247, 247); 
          9.     border: 1px solid rgba(147, 184, 189,0.8); 
          10.     box-shadow: 
          11.         0pt 2px 5px rgba(105, 108, 109,  0.7), 
          12.         0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; 
          13.     border-radius: 5px; 
          14. } 
          15. #login{ 
          16.     z-index: 22; 
          17. } 
          

          這里定義了投影，以及如文章開始的那張圖上所示的藍色輝光。并賦值z-index為22。
          

          下面是關(guān)于背景圖片樣式的代碼：
          

          1. /**** general text styling ****/ 
          2. #wrapper h1{ 
          3.     font-size: 48px; 
          4.     color: rgb(6, 106, 117); 
          5.     padding: 2px 0 10px 0; 
          6.     font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif; 
          7.     font-weight: bold; 
          8.     text-align: center; 
          9.     padding-bottom: 30px; 
          10. } 
          11.   
          12. /** For the moment only webkit supports the background-clip:text; */ 
          13. #wrapper h1{ 
          14.     background: 
          15.     -webkit-repeating-linear-gradient(-45deg, 
          16.         rgb(18, 83, 93) , 
          17.         rgb(18, 83, 93) 20px, 
          18.         rgb(64, 111, 118) 20px, 
          19.         rgb(64, 111, 118) 40px, 
          20.         rgb(18, 83, 93) 40px); 
          21.     -webkit-text-fill-color: transparent; 
          22.     -webkit-background-clip: text; 
          23. } 
          24.   
          25. #wrapper h1:after{ 
          26.     content:' '; 
          27.     display:block; 
          28.     width:100%; 
          29.     height:2px; 
          30.     margin-top:10px; 
          31.     background: 
          32.         linear-gradient(left, 
          33.             rgba(147,184,189,0) 0%, 
          34.             rgba(147,184,189,0.8) 20%, 
          35.             rgba(147,184,189,1) 53%, 
          36.             rgba(147,184,189,0.8) 79%, 
          37.             rgba(147,184,189,0) 100%); 
          38. } 
          

          注意，由于目前只有WebKit瀏覽器支持background-clip: text，為了在適應(yīng)不同瀏覽器，還要創(chuàng)建一個H1標題樣式：帶條紋背景的文本樣式。由于background-clip: text只適用于WebKit，所以這里用WebKit作前綴，這也是為什么要把CSS分成兩部分，并只使用來定義的原因。用WebKit作前綴是不太好的做法，僅用于這種演示示例。現(xiàn)在，WebKit的文本顏色透明度屬性可以派上用場了：它可以實現(xiàn)透明效果的背景樣式。
          

          表單上，標題下方那條水平線的樣式也由一個after偽類控制。這里使用了一個2px的高度和兩邊淡出的效果。
          

          現(xiàn)在，接著進行樣式定義。
          

          1. /**** advanced input styling ****/ 
          2. /* placeholder */ 
          3. ::-webkit-input-placeholder  { 
          4.     color: rgb(190, 188, 188); 
          5.     font-style: italic; 
          6. } 
          7. input:-moz-placeholder, 
          8. textarea:-moz-placeholder{ 
          9.     color: rgb(190, 188, 188); 
          10.     font-style: italic; 
          11. } 
          12. input { 
          13.   outline: none; 
          14. } 
          

          為輸入樣式定義outline屬性，以便用戶能迅速輸入正確信息。如果你不打算定義outline，那也應(yīng)該使用 :active 和 :focus來定義這些輸入樣式的狀態(tài)。
          

          1. /* all the input except submit and checkbox */ 
          2. #wrapper input:not([type="checkbox"]){ 
          3.     width: 92%; 
          4.     margin-top: 4px; 
          5.     padding: 10px 5px 10px 32px; 
          6.     border: 1px solid rgb(178, 178, 178); 
          7.     box-sizing : content-box; 
          8.     border-radius: 3px; 
          9.     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; 
          10.     transition: all 0.2s linear; 
          11. } 
          12. #wrapper input:not([type="checkbox"]):active, 
          13. #wrapper input:not([type="checkbox"]):focus{ 
          14.     border: 1px solid rgba(91, 90, 90, 0.7); 
          15.     background: rgba(238, 236, 240, 0.2); 
          16.     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; 
          17. } 
          

          這里我們并不全是用偽類去定義輸入樣式，除了checkbox。因為刪除了outline屬性，所以這里使用了 a :focus 和:active 狀態(tài)定義。自從不再為輸入樣式使用:before 和 :after偽類后，就使用圖標的label標簽進行設(shè)置。這里使用了fontomas庫中的一些漂亮圖標。還記得data-icon 的屬性嗎？要把信息傳遞到正確的地方。這里使用data-icon=’u’ 來表示用戶， ‘e’ 表示email, ‘p’ 表示密碼。一旦確定的信件，下載字體，用fontsquirrel字體引擎將這些信息轉(zhuǎn)換成@font-face兼容格式。
          

          1. @font-face { 
          2.     font-family: 'FontomasCustomRegular'; 
          3.     src: url('fonts/fontomas-webfont.eot'); 
          4.     src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'), 
          5.          url('fonts/fontomas-webfont.woff') format('woff'), 
          6.          url('fonts/fontomas-webfont.ttf') format('truetype'), 
          7.          url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg'); 
          8.     font-weight: normal; 
          9.     font-style: normal; 
          10. } 
          11.   
          12. /** the magic icon trick ! **/ 
          13. [data-icon]:after { 
          14.     content: attr(data-icon); 
          15.     font-family: 'FontomasCustomRegular'; 
          16.     color: rgb(106, 159, 171); 
          17.     position: absolute; 
          18.     left: 10px; 
          19.     top: 35px; 
          20.     width: 30px; 
          21. } 
          

          不用為每個圖標指定一個類，而是使用content: attr(data-icon) 來檢查data-icon屬性信息。所以只需要定義字體、顏色和位置。
          

          現(xiàn)在，為兩個表單中的提交按鈕定義樣式。
          

          1. /*styling both submit buttons */ 
          2. #wrapper p.button input{ 
          3.     width: 30%; 
          4.     cursor: pointer; 
          5.     background: rgb(61, 157, 179); 
          6.     padding: 8px 5px; 
          7.     font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; 
          8.     color: #fff; 
          9.     font-size: 24px; 
          10.     border: 1px solid rgb(28, 108, 122); 
          11.     margin-bottom: 10px; 
          12.     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 
          13.     border-radius: 3px; 
          14.     box-shadow: 
          15.         0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 
          16.         0px 0px 0px 3px rgb(254, 254, 254), 
          17.         0px 5px 3px 3px rgb(210, 210, 210); 
          18.     transition: all 0.2s linear; 
          19. } 
          20. #wrapper p.button input:hover{ 
          21.     background: rgb(74, 179, 198); 
          22. } 
          23. #wrapper p.button input:active, 
          24. #wrapper p.button input:focus{ 
          25.     background: rgb(40, 137, 154); 
          26.     position: relative; 
          27.     top: 1px; 
          28.     border: 1px solid rgb(12, 76, 87); 
          29.     box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; 
          30. } 
          31. p.login.button, 
          32. p.signin.button{ 
          33.     text-align: right; 
          34.     margin: 5px 0; 
          35. } 
          

          這里是一個創(chuàng)建邊框投影的技巧，你可以隨意設(shè)置一條或多條邊框投影。這里使用length value來創(chuàng)建一個“假”的第二條邊框，寬度為3px，無模糊效果。接著定義復(fù)選框的樣式：
          

          1. /* styling the checkbox "keep me logged in"*/ 
          2. .keeplogin{ 
          3.     margin-top: -5px; 
          4. } 
          5. .keeplogin input, 
          6. .keeplogin label{ 
          7.     display: inline-block; 
          8.     font-size: 12px; 
          9.     font-style: italic; 
          10. } 
          11. .keeplogin input#loginkeeping{ 
          12.     margin-right: 5px; 
          13. } 
          14. .keeplogin label{ 
          15.     width: 80%; 
          16. } 
          

          為表單使用重復(fù)線性漸變的樣式，以實現(xiàn)條紋背景效果。
          

          1. p.change_link{ 
          2.     position: absolute; 
          3.     color: rgb(127, 124, 124); 
          4.     left: 0px; 
          5.     height: 20px; 
          6.     width: 440px; 
          7.     padding: 17px 30px 20px 30px; 
          8.     font-size: 16px ; 
          9.     text-align: right; 
          10.     border-top: 1px solid rgb(219, 229, 232); 
          11.     border-radius: 0 0  5px 5px; 
          12.     background: rgb(225, 234, 235); 
          13.     background: repeating-linear-gradient(-45deg, 
          14.     rgb(247, 247, 247) , 
          15.     rgb(247, 247, 247) 15px, 
          16.     rgb(225, 234, 235) 15px, 
          17.     rgb(225, 234, 235) 30px, 
          18.     rgb(247, 247, 247) 30px 
          19.     ); 
          20. } 
          21. #wrapper p.change_link a { 
          22.     display: inline-block; 
          23.     font-weight: bold; 
          24.     background: rgb(247, 248, 241); 
          25.     padding: 2px 6px; 
          26.     color: rgb(29, 162, 193); 
          27.     margin-left: 10px; 
          28.     text-decoration: none; 
          29.     border-radius: 4px; 
          30.     border: 1px solid rgb(203, 213, 214); 
          31.     transition: all 0.4s  linear; 
          32. } 
          33. #wrapper p.change_link a:hover { 
          34.     color: rgb(57, 191, 215); 
          35.     background: rgb(247, 247, 247); 
          36.     border: 1px solid rgb(74, 179, 198); 
          37. } 
          38. #wrapper p.change_link a:active{ 
          39.     position: relative; 
          40.     top: 1px; 
          41. } 
          

          現(xiàn)在，我們已經(jīng)定義了兩個漂亮的樣式了，但在一個時間段里，只需要顯示一個。所以，現(xiàn)在用動畫效果來實現(xiàn)。
          

          創(chuàng)建切換動畫
          

          首先是將不透明度設(shè)為0以隱藏表單：
          

          1. #register{ 
          2.     z-index: 21; 
          3.     opacity: 0; 
          4. } 
          

          還記得嗎？前面登錄表單中z-index的值為22。上面這段代碼的動作是把z-index的值定義為21，讓它可以處在登錄表單的上一層（指顯示順序，數(shù)字小的顯示在前面）。
          

          重點部分:target目標偽類。這里將使用“錨”進行兩個表單間的顯示過渡。“錨”鏈接的一般用法，是在頁面上的兩處實現(xiàn)跳轉(zhuǎn)。但這里并不希望跳轉(zhuǎn)到別處，只需要表單顯示的切換。這里的訣竅在于表單頂部的兩個小環(huán)節(jié)中，當點擊“錨”標記時，觸發(fā)第一個表單的顯示設(shè)置“none”。這樣，就避免了任何的頁面跳轉(zhuǎn)。
          

          1. #toregister:target ~ #wrapper #register, 
          2. #tologin:target ~ #wrapper #login{ 
          3.     z-index: 22; 
          4.     animation-name: fadeInLeft; 
          5.     animation-delay: .1s; 
          6. } 
          

          當點擊登錄表單上的“Join us”按鈕時，就會觸發(fā) #toregister，然后通過選擇找到#register，激活動畫fadeInLeft。使隱藏的表單慢慢顯現(xiàn)出來，并同時改變其z-index值，讓這個表單出現(xiàn)在其它表單的上面。
          

          下面是實現(xiàn)這種動畫樣式的代碼。
          

          1. .animate{ 
          2.     animation-duration: 0.5s; 
          3.     animation-timing-function: ease; 
          4.     animation-fill-mode: both; 
          5. } 
          6. @keyframes fadeInLeft { 
          7.     0% { 
          8.         opacity: 0; 
          9.         transform: translateX(-20px); 
          10.     } 
          11.   
          12.     100% { 
          13.         opacity: 1; 
          14.         transform: translateX(0); 
          15.     } 
          16. } 
          

          表單用“disappearing”的動畫形式從左邊淡出：
          

          1. #toregister:target ~ #wrapper #login, 
          2. #tologin:target ~ #wrapper #register{ 
          3.     animation-name: fadeOutLeftBig; 
          4. } 
          5.   
          6. @keyframes fadeOutLeft { 
          7.     0% { 
          8.         opacity: 1; 
          9.         transform: translateX(0); 
          10.     } 
          11.   
          12.     100% { 
          13.         opacity: 0; 
          14.         transform: translateX(-20px); 
          15.     } 
          16. } 
          

          上面的動畫實現(xiàn)代碼來自Dan Eden的 animate.css，把其中的動畫名稱修改為自己的表單對象就可以實現(xiàn)。里面還有一些其他的自定義動畫。
          

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

          英文原址：tympanus.net
          

          實例演示地址：
          

          從左開始漸變顯示的動畫效果
          

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

          從小放大的動畫效果
          

          點擊開始源代碼下載
          

          本文為CSDN編譯整理，未經(jīng)允許不得轉(zhuǎn)載。如需轉(zhuǎn)載請聯(lián)系market@csdn.net
           
          
	
          


          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發(fā)表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
丹棱县|
新化县|
庄河市|
顺义区|
二手房|
卢龙县|
马龙县|
屯留县|
南澳县|
黔南|
新安县|
罗江县|
贵港市|
健康|
鄂尔多斯市|
高州市|
射洪县|
禹州市|
桓台县|
伊春市|
游戏|
石首市|
郯城县|
孝义市|
剑河县|
铁力市|
南华县|
平顺县|
北碚区|
巴彦县|
双柏县|
岢岚县|
电白县|
乌鲁木齐市|
攀枝花市|
山阳县|
开化县|
安仁县|
长宁县|
思南县|
阳东县|