HTML5+CSS3构建同页面表单间的动画切换

来源：互联网发布：外贸海关数据购买编辑：程序博客网时间：2024/06/05 19:03

有开发者表示，HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果，完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。

这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。

请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。

HTML部分

在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。来看看代码：

1 <div id="container_demo" >

2

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"/>

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" />

17 <p class="keeplogin">

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

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

21 <p class="login button">

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

24 <p class="change_link">

25 Not a member yet ?

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

28 </form>

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" />

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"/>

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"/>

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"/>

50 <p class="signin button">

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

53 <p class="change_link">

54 Already a member ?

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

57 </form>

可以看到在上面的代码中，使用了一些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 }

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中的伪类。）

0 0