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

HTML5+CSS3构建同页面表单间的动画切换2012-03-30 16:13|4577次阅读|来源：CSDN编译【已有4条评论】发表评论关键词：CSS3,HTML5|作者：赵红|收藏这篇资讯【CSDN编译】导读：有开发者表示，HTML5将给个人开发者带来更多机遇。下面的稿件详细描述了一个唯美的动画效果，它实现了在同一个页面中进行登录表单和注册表单的转换。这些效果，完全由HTML5和CSS3实现。文章后面附上了三种不同风格的显示转换效果、以及源码下载。既可为网页瘦身，又可实现漂亮的网页效果，快快收藏吧。这篇稿件将描述如何在HTML5中，使用CSS3的目标伪类“:target”来创建注册和登录两个表单、并实现它们在同一个页面中的显示转换。此演示目的是向用户展示从登录表单点击标注有“Join us”的按钮链接到注册表单的动画效果。我们将在文章末尾附上本实例的源码下载地址。点击右下方Join us按钮，登录表单隐藏，注册表单显现请注意，此实例只用于演示目的，它只能在支持“:target”伪类的浏览器中正常显示出来。HTML部分在HTML中定义有两个表单，其中一个表单已用CSS隐藏使之不可见。来看看代码：1. 2. 3. 4. 5. 6. 7. 8. Login9. 10. Youremailorusername11. 12. 13. 14. Yourpassword15. 16. 17. 18. 19. Keepmeloggedin20. 21. 22. 23. 24. 25. Notamemberyet?26. Joinus27. 28. 29. 30. 31. 32. 33. Signup34. 35. Yourusername36. 37. 38. 39. Youremail40. 41. 42. 43. Yourpassword44. 45. 46. 47. Pleaseconfirmyourpassword48. 49. 50. 51. 52. 53. 54. Alreadyamember?55. Goandlogin56. 57. 58. 59. 60. 61. 可以看到在上面的代码中，使用了一些HTML5不错的新功能。比如在input type方面，实现密码自动隐藏用户键入点替换(当然这取决于浏览器是否支持)。用浏览器检查输入类型的电子邮件是否是正确格式等。有两个环节要记住。你可能已经注意到表单项部的两个链接。当我们点击并触发目标伪类时，我们就能通过“锚”标记（HTML中一种跳转定位方式，一般用于长网页）在原网页中跳到合适的位置，而不用另打开一个新网页。第二个动作与所用图标、字体相关。我们为显示的图标使用一个数据属性。在HTML中通过设置“icon_character”，就可以选择一个CSS来控制所有的图标风格样式。（这里对于锚标记的使用可能会有些糊涂，但看到后面就会明白了。）CSS部分这里将会出现一些CSS3的技巧代码，请注意，可能有的浏览器目前还不支持CSS3而无法正常显示。两个CSS定义。（后面会说明为什么要定义两个CSS的原因。）首先，为需要显示的区域定义一个外观。1. #subscribe,2. #login3. position:absolute;4. top:0px;5. width:88%;6. padding:18px6%60px6%;7. margin:0035px0;8. background:rgb(247,247,247);9. border:1pxsolidrgba(147,184,189,0.8);10. box-shadow:11. 0pt2px5pxrgba(105,108,109,0.7),12. 0px0px8px5pxrgba(208,223,226,0.4)inset;13. border-radius:5px;14. 15. #login16. z-index:22;17. 这里定义了投影，以及如文章开始的那张图上所示的蓝色辉光。并赋值z-index为22。下面是关于背景图片样式的代码：1. /*generaltextstyling*/2. #wrapperh13. font-size:48px;4. color:rgb(6,106,117);5. padding:2px010px0;6. font-family:FranchiseRegular,ArialNarrow,Arial,sans-serif;7. font-weight:bold;8. text-align:center;9. padding-bottom:30px;10. 11. 12. /*Forthemomentonlywebkitsupportsthebackground-clip:text;*/13. #wrapperh114. 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. #wrapperh1:after26. 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，为了在适应不同浏览器，还要创建一个H1标题样式：带条纹背景的文本样式。由于background-clip: text只适用于WebKit，所以这里用WebKit作前缀，这也是为什么要把CSS分成两部分，并只使用来定义的原因。用WebKit作前缀是不太好的做法，仅用于这种演示示例。现在，WebKit的文本颜色透明度属性可以派上用场了：它可以实现透明效果的背景样式。表单上，标题下方那条水平线的样式也由一个after伪类控制。这里使用了一个2px的高度和两边淡出的效果。现在，接着进行样式定义。1. /*advancedinputstyling*/2. /*placeholder*/3. :-webkit-input-placeholder4. color:rgb(190,188,188);5. font-style:italic;6. 7. input:-moz-placeholder,8. textarea:-moz-placeholder9. color:rgb(190,188,188);10. font-style:italic;11. 12. input13. outline:none;14. 为输入样式定义outline属性，以便用户能迅速输入正确信息。如果你不打算定义outline，那也应该使用 :active 和 :focus来定义这些输入样式的状态。1. /*alltheinputexceptsubmitandcheckbox*/2. #wrapperinput:not(type=checkbox)3. width:92%;4. margin-top:4px;5. padding:10px5px10px32px;6. border:1pxsolidrgb(178,178,178);7. box-sizing:content-box;8. border-radius:3px;9. box-shadow:0px1px4px0pxrgba(168,168,168,0.6)inset;10. transition:all0.2slinear;11. 12. #wrapperinput:not(type=checkbox):active,13. #wrapperinput:not(type=checkbox):focus14. border:1pxsolidrgba(91,90,90,0.7);15. background:rgba(238,236,240,0.2);16. box-shadow:0px1px4px0pxrgba(168,168,168,0.9)inset;17. 这里我们并不全是用伪类去定义输入样式，除了checkbox。因为删除了outline属性，所以这里使用了 a :focus 和:active 状态定义。自从不再为输入样式使用:before 和 :after伪类后，就使用图标的label标签进行设置。这里使用了fontomas库中的一些漂亮图标。还记得data-icon 的属性吗？要把信息传递到正确的地方。这里使用data-icon=u 来表示用户， e 表示email, p 表示密码。一旦确定的信件，下载字体，用fontsquirrel字体引擎将这些信息转换成font-face兼容格式。1. font-face2. 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. /*themagicicontrick!*/13. data-icon:after14. 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属性信息。所以只需要定义字体、颜色和位置。现在，为两个表单中的提交按钮定义样式。1. /*stylingbothsubmitbuttons*/2. #wrapperp.buttoninput3. width:30%;4. cursor:pointer;5. background:rgb(61,157,179);6. padding:8px5px;7. font-family:BebasNeueRegular,ArialNarrow,Arial,sans-serif;8. color:#fff;9. font-size:24px;10. border:1pxsolidrgb(28,108,122);11. margin-bottom:10px;12. text-shadow:01px1pxrgba(0,0,0,0.5);13. border-radius:3px;14. box-shadow:15. 0px1px6px4pxrgba(0,0,0,0.07)inset,16. 0px0px0px3pxrgb(254,254,254),17. 0px5px3px3pxrgb(210,210,210);18. transition:all0.2slinear;19. 20. #wrapperp.buttoninput:hover21. background:rgb(74,179,198);22. 23. #wrapperp.buttoninput:active,24. #wrapperp.buttoninput:focus25. background:rgb(40,137,154);26. position:relative;27. top:1px;28. border:1pxsolidrgb(12,76,87);29. box-shadow:0px1px6px4pxrgba(0,0,0,0.2)inset;30. 31. p.login.button,32. p.signin.button33. text-align:right;34. margin:5px0;35. 这里是一个创建边框投影的技巧，你可以随意设置一条或多条边框投影。这里使用length value来创建一个“假”的第二条边框，宽度为3px，无模糊效果。接着定义复选框的样式：1. /*stylingthecheckboxkeepmeloggedin*/2. .keeplogin3. margin-top:-5px;4. 5. .keeplogininput,6. .keeploginlabel7. display:inline-block;8. font-size:12px;9. font-style:italic;10. 11. .keeplogininput#loginkeeping12. margin-right:5px;13. 14. .keeploginlabel15. width:80%;16. 为表单使用重复线性渐变的样式，以实现条纹背景效果。1. p.change_link2. position:absolute;3. color:rgb(127,124,124);4. left:0px;5. height:20px;6. width:440px;7. padding:17px30px20px30px;8. font-size:16px;9. text-align:right;10. border-top:1pxsolidrgb(219,229,232);11. border-radius:005px5px;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)30px19. );20. 21. #wrapperp.change_linka22. display:inline-block;23. font-weight:bold;24. background:rgb(247,248,241);25. padding:2px6px;26. color:rgb(29,162,193);27. margin-left:10px;28. text-decoration:none;29. border-radius:4px;30. border:1pxsolidrgb(203,213,214);31. transition:all0.4slinear;32. 33. #wrapperp.change_linka:hover34. color:rgb(57,191,215);35. background:rgb(247,247,247);36. border:1pxsolidrgb(74,179,198);37. 38. #wrapperp.change_linka:active39. position:relative;40. top:1px;41. 现在，我们已经定义了两个漂亮的样式了，但在一个时间段里，只需要显示一个。所以，现在用动画效果来实现。创建切换动画首先是将不透明度设为0以隐藏表单：1. #register2. z-index:21;3. opacity:0;4. 还记得吗？前面登录表单中z-index的值为22。上面这段代码的动作是把z-index的值定义为21，让它可以处在登录表单的上一层（指显示顺序，数字小的显示在前面）。重点部分:target目标伪类。这里将使用“锚”进行两个表单间的显示过渡。“锚”链接的一般用法，是在页面上的两处实现跳转。但这里并不希望跳转到别处，只需要表单显示的切换。这里的诀窍在于表单顶部的两个小环节中，当点击“锚”标记时，触发第一个表单的显示设置“none”。这样，就避免了任何的页面跳转。1. #toregister:target#wrapper#register,2. #tologin:target#wrapper#login3. z-index:22;4. animation-name:fadeInLeft;5. animation-delay:.1s;6. 当点击登录表单上的“Join us”按钮时，就会触发 #toregister，然后通过选择找到#reg