HTML5+CSS3構建同頁面表單間的動畫切換

 

HTML5+CSS3構建同頁面表單間的動畫切換

導讀：有開發者表示，HTML5將給我的開發者帶來更多機遇。下面的稿件詳細描述了一個惟美的動畫效果，它實現了在同一個頁面中進行登陸表單和註冊表單的轉換。這些效果，徹底由HTML5和CSS3實現。文章後面附上了三種不一樣風格的顯示轉換效果、以及源碼下載。既可爲網頁瘦身，又可實現漂亮的網頁效果，快快收藏吧。

這篇稿件將描述如何在HTML5中，使用CSS3的目標僞類「:target」來建立註冊和登陸兩個表單、並實現它們在同一個頁面中的顯示轉換。此演示目的是向用戶展現從登陸表單點擊標註有「Join us」的按鈕連接到註冊表單的動畫效果。咱們將在文章末尾附上本實例的源碼下載地址。

點擊右下方Join us按鈕，登陸表單隱藏，註冊表單顯現

請注意，此實例只用於演示目的，它只能在支持「: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">

4             <a class="hiddenanchor" id="tologin">

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                      

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                      

17                      <p class="keeplogin">

18                          <input type="checkbox" name="loginkeeping"id="loginkeeping" value="loginkeeping" />

19                          <label for="loginkeeping">Keep me logged in</label>

20                      

21                      <p class="login button">

22                          <input type="submit" value="Login" />

23                      

24                      <p class="change_link">

25                          Not a member yet ?

26                          <a href="#toregister" class="to_register">Join us

27                      

28                  </form>

29              

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                      

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                      

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                      

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                      

50                      <p class="signin button">

51                          <input type="submit" value="Sign up"/>

52                      

53                      <p class="change_link">

54                          Already a member ?

55                          <a href="#tologin" class="to_register"> Go and log in

56                      

57                  </form>

58              

59        

60          

61     

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

有兩個環節要記住。你可能已經注意到表單項部的兩個<a href>連接。當咱們點擊並觸發目標僞類時，咱們就能經過「錨」標記（HTML中一種跳轉定位方式，通常用於長網頁）在原網頁中跳到合適的位置，而不用另打開一個新網頁。第二個動做與所用圖標、字體相關。咱們爲顯示的圖標使用一個數據屬性。在HTML中經過設置「icon_character」，就能夠選擇一個CSS來控制全部的圖標風格樣式。（這裏對於錨標記的使用可能會有些糊塗，但看到後面就會明白了。）

CSS部分

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

兩個CSS定義。（後面會說明爲何要定義兩個CSS的緣由。）

首先，爲須要顯示的區域定義一個外觀。

62      #subscribe,

63      #login{

64          position: absolute;

65          top: 0px;

66          width: 88%;

67          padding: 18px 6% 60px 6%;

68          margin: 0 0 35px 0;

69          background: rgb(247, 247, 247);

70          border: 1px solid rgba(147, 184, 189,0.8);

71          box-shadow:

72              0pt 2px 5px rgba(105, 108, 109,  0.7),

73              0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;

74          border-radius: 5px;

75      }

76      #login{

77          z-index: 22;

78      }

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

下面是關於背景圖片樣式的代碼：

79      /**** general text styling ****/

80      #wrapper h1{

81          font-size: 48px;

82          color: rgb(6, 106, 117);

83          padding: 2px 0 10px 0;

84          font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;

85          font-weight: bold;

86          text-align: center;

87          padding-bottom: 30px;

88      }

89        

90      /** For the moment only webkit supports the background-clip:text; */

91      #wrapper h1{

92          background:

93          -webkit-repeating-linear-gradient(-45deg,

94              rgb(18, 83, 93) ,

95              rgb(18, 83, 93) 20px,

96              rgb(64, 111, 118) 20px,

97              rgb(64, 111, 118) 40px,

98              rgb(18, 83, 93) 40px);

99          -webkit-text-fill-color: transparent;

100       -webkit-background-clip: text;

101   }

102     

103   #wrapper h1:after{

104       content:' ';

105       display:block;

106       width:100%;

107       height:2px;

108       margin-top:10px;

109       background:

110           linear-gradient(left,

111               rgba(147,184,189,0) 0%,

112               rgba(147,184,189,0.8) 20%,

113               rgba(147,184,189,1) 53%,

114               rgba(147,184,189,0.8) 79%,

115               rgba(147,184,189,0) 100%);

116   }

注意，因爲目前只有WebKit瀏覽器支持background-clip: text，爲了在適應不一樣瀏覽器，還要建立一個H1標題樣式：帶條紋背景的文本樣式。因爲background-clip: text只適用於WebKit，因此這裏用WebKit做前綴，這也是爲何要把CSS分紅兩部分，並只使用來定義的緣由。用WebKit做前綴是不太好的作法，僅用於這種演示示例。如今，WebKit的文本顏色透明度屬性能夠派上用場了：它能夠實現透明效果的背景樣式。

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

如今，接着進行樣式定義。

117   /**** advanced input styling ****/

118   /* placeholder */

119   ::-webkit-input-placeholder  {

120       color: rgb(190, 188, 188);

121       font-style: italic;

122   }

123   input:-moz-placeholder,

124   textarea:-moz-placeholder{

125       color: rgb(190, 188, 188);

126       font-style: italic;

127   }

128   input {

129     outline: none;

130   }

爲輸入樣式定義outline屬性，以便用戶能迅速輸入正確信息。若是你不打算定義outline，那也應該使用 :active和 :focus來定義這些輸入樣式的狀態。

131   /* all the input except submit and checkbox */

132   #wrapper input:not([type="checkbox"]){

133       width: 92%;

134       margin-top: 4px;

135       padding: 10px 5px 10px 32px;

136       border: 1px solid rgb(178, 178, 178);

137       box-sizing : content-box;

138       border-radius: 3px;

139       box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;

140       transition: all 0.2s linear;

141   }

142   #wrapper input:not([type="checkbox"]):active,

143   #wrapper input:not([type="checkbox"]):focus{

144       border: 1px solid rgba(91, 90, 90, 0.7);

145       background: rgba(238, 236, 240, 0.2);

146       box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;

147   }

這裏咱們並不全是用僞類去定義輸入樣式，除了checkbox。由於刪除了outline屬性，因此這裏使用了 a :focus和:active 狀態定義。自從再也不爲輸入樣式使用:before 和 :after僞類後，就使用圖標的label標籤進行設置。這裏使用了fontomas庫中的一些漂亮圖標。還記得data-icon 的屬性嗎？要把信息傳遞到正確的地方。這裏使用data-icon=’u’ 來表示用戶， ‘e’ 表示email, ‘p’ 表示密碼。一旦肯定的信件，下載字體，用fontsquirrel字體引擎將這些信息轉換成@font-face兼容格式。

148   @font-face {

149       font-family: 'FontomasCustomRegular';

150       src: url('fonts/fontomas-webfont.eot');

151       src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),

152            url('fonts/fontomas-webfont.woff') format('woff'),

153            url('fonts/fontomas-webfont.ttf') format('truetype'),

154            url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');

155       font-weight: normal;

156       font-style: normal;

157   }

158     

159   /** the magic icon trick ! **/

160   [data-icon]:after {

161       content: attr(data-icon);

162       font-family: 'FontomasCustomRegular';

163       color: rgb(106, 159, 171);

164       position: absolute;

165       left: 10px;

166       top: 35px;

167       width: 30px;

168   }

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

如今，爲兩個表單中的提交按鈕定義樣式。

169   /*styling both submit buttons */

170   #wrapper p.button input{

171       width: 30%;

172       cursor: pointer;

173       background: rgb(61, 157, 179);

174       padding: 8px 5px;

175       font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;

176       color: #fff;

177       font-size: 24px;

178       border: 1px solid rgb(28, 108, 122);

179       margin-bottom: 10px;

180       text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);

181       border-radius: 3px;

182       box-shadow:

183           0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,

184           0px 0px 0px 3px rgb(254, 254, 254),

185           0px 5px 3px 3px rgb(210, 210, 210);

186       transition: all 0.2s linear;

187   }

188   #wrapper p.button input:hover{

189       background: rgb(74, 179, 198);

190   }

191   #wrapper p.button input:active,

192   #wrapper p.button input:focus{

193       background: rgb(40, 137, 154);

194       position: relative;

195       top: 1px;

196       border: 1px solid rgb(12, 76, 87);

197       box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;

198   }

199   p.login.button,

200   p.signin.button{

201       text-align: right;

202       margin: 5px 0;

203   }

這裏是一個建立邊框投影的技巧，你能夠隨意設置一條或多條邊框投影。這裏使用length value來建立一個「假」的第二條邊框，寬度爲3px，無模糊效果。接着定義複選框的樣式：

204   /* styling the checkbox "keep me logged in"*/

205   .keeplogin{

206       margin-top: -5px;

207   }

208   .keeplogin input,

209   .keeplogin label{

210       display: inline-block;

211       font-size: 12px;

212       font-style: italic;

213   }

214   .keeplogin input#loginkeeping{

215       margin-right: 5px;

216   }

217   .keeplogin label{

218       width: 80%;

219   }

爲表單使用重複線性漸變的樣式，以實現條紋背景效果。

220   p.change_link{

221       position: absolute;

222       color: rgb(127, 124, 124);

223       left: 0px;

224       height: 20px;

225       width: 440px;

226       padding: 17px 30px 20px 30px;

227       font-size: 16px ;

228       text-align: right;

229       border-top: 1px solid rgb(219, 229, 232);

230       border-radius: 0 0  5px 5px;

231       background: rgb(225, 234, 235);

232       background: repeating-linear-gradient(-45deg,

233       rgb(247, 247, 247) ,

234       rgb(247, 247, 247) 15px,

235       rgb(225, 234, 235) 15px,

236       rgb(225, 234, 235) 30px,

237       rgb(247, 247, 247) 30px

238       );

239   }

240   #wrapper p.change_link a {

241       display: inline-block;

242       font-weight: bold;

243       background: rgb(247, 248, 241);

244       padding: 2px 6px;

245       color: rgb(29, 162, 193);

246       margin-left: 10px;

247       text-decoration: none;

248       border-radius: 4px;

249       border: 1px solid rgb(203, 213, 214);

250       transition: all 0.4s  linear;

251   }

252   #wrapper p.change_link a:hover {

253       color: rgb(57, 191, 215);

254       background: rgb(247, 247, 247);

255       border: 1px solid rgb(74, 179, 198);

256   }

257   #wrapper p.change_link a:active{

258       position: relative;

259       top: 1px;

260   }

如今，咱們已經定義了兩個漂亮的樣式了，但在一個時間段裏，只須要顯示一個。因此，如今用動畫效果來實現。

建立切換動畫

首先是將不透明度設爲0以隱藏表單：

261   #register{

262       z-index: 21;

263       opacity: 0;

264   }

還記得嗎？前面登陸表單中z-index的值爲22。上面這段代碼的動做是把z-index的值定義爲21，讓它能夠處在登陸表單的上一層（指顯示順序，數字小的顯示在前面）。

重點部分:target目標僞類。這裏將使用「錨」進行兩個表單間的顯示過渡。「錨」連接的通常用法，是在頁面上的兩處實現跳轉。但這裏並不但願跳轉到別處，只須要表單顯示的切換。這裏的訣竅在於表單頂部的兩個小環節中，當點擊「錨」標記時，觸發第一個表單的顯示設置「none」。這樣，就避免了任何的頁面跳轉。

265   #toregister:target ~ #wrapper #register,

266   #tologin:target ~ #wrapper #login{

267       z-index: 22;

268       animation-name: fadeInLeft;

269       animation-delay: .1s;

270   }

當點擊登陸表單上的「Join us」按鈕時，就會觸發 #toregister，而後經過選擇找到#register，激活動畫fadeInLeft。使隱藏的表單慢慢顯現出來，並同時改變其z-index值，讓這個表單出如今其它表單的上面。

下面是實現這種動畫樣式的代碼。

271   .animate{

272       animation-duration: 0.5s;

273       animation-timing-function: ease;

274       animation-fill-mode: both;

275   }

276   @keyframes fadeInLeft {

277       0% {

278           opacity: 0;

279           transform: translateX(-20px);

280       }

281     

282       100% {

283           opacity: 1;

284           transform: translateX(0);

285       }

286   }

表單用「disappearing」的動畫形式從左邊淡出：

287   #toregister:target ~ #wrapper #login,

288   #tologin:target ~ #wrapper #register{

289       animation-name: fadeOutLeftBig;

290   }

291     

292   @keyframes fadeOutLeft {

293       0% {

294           opacity: 1;

295           transform: translateX(0);

296       }

297     

298       100% {

299           opacity: 0;

300           transform: translateX(-20px);

301       }

302   }

上面的動畫實現代碼來自Dan Eden的 animate.css，把其中的動畫名稱修改成本身的表單對象就能夠實現。裏面還有一些其餘的自定義動畫。

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