导读：有开发者表示，HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果，完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。 这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。 点击右下方Join us按钮，登录表单隐藏，注册表单显现 请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。 HTML部分 在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。来看看代码： 1 <div id="container_demo" > 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">  lease 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.  ; 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, 11 20px, 97 rgb(64, 111, 11 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. 20%, 113 rgba(147,184,189,1) 53%, 114 rgba(147,184,189,0. 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, 18 ; 121 font-style: italic; 122 } 123 input:-moz-placeholder, 124 textarea:-moz-placeholder{ 125 color: rgb(190, 188, 18 ; 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, 17 ; 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, 19 ; 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, 19 ; 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 }
| 
免费注册
发表于 2012-12-17 13:13
Thank you~