`
v5qqbrowser
  • 浏览: 356813 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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

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

点击右下方Join us按钮，登录表单隐藏，注册表单显现

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

HTML部分

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

    

  1. <divid="container_demo">
    2. 

  2. <!--hiddenanchortostopjumphttp://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4-->
    3. 

  3. <aclass="hiddenanchor"id="toregister"></a>
    4. 

  4. <aclass="hiddenanchor"id="tologin"></a>
    5. 

  5. <divid="wrapper">
    6. 

  6. <divid="login"class="animateform">
    7. 

  7. <formaction="mysuperscript.php"autocomplete="on">
    8. 

  8. <h1>Login</h1>
    9. 

  9. <p>
    10. 

  10. <labelfor="username"class="uname"data-icon="u">Youremailorusername</label>
    11. 

  11. <inputid="username"name="username"required="required"type="text"placeholder="myusernameormymail@mail.com"/>
    12. 

  12. </p>
    13. 

  13. <p>
    14. 

  14. <labelfor="password"class="youpasswd"data-icon="p">Yourpassword</label>
    15. 

  15. <inputid="password"name="password"required="required"type="password"placeholder="eg.X8df!90EO"/>
    16. 

  16. </p>
    17. 

  17. <pclass="keeplogin">
    18. 

  18. <inputtype="checkbox"name="loginkeeping"id="loginkeeping"value="loginkeeping"/>
    19. 

  19. <labelfor="loginkeeping">Keepmeloggedin</label>
    20. 

  20. </p>
    21. 

  21. <pclass="loginbutton">
    22. 

  22. <inputtype="submit"value="Login"/>
    23. 

  23. </p>
    24. 

  24. <pclass="change_link">
    25. 

  25. Notamemberyet?
    26. 

  26. <ahref="#toregister"class="to_register">Joinus</a>
    27. 

  27. </p>
    28. 

  28. </form>
    29. 

  29. </div>
    30. 

    31. 

  31. <divid="register"class="animateform">
    32. 

  32. <formaction="mysuperscript.php"autocomplete="on">
    33. 

  33. <h1>Signup</h1>
    34. 

  34. <p>
    35. 

  35. <labelfor="usernamesignup"class="uname"data-icon="u">Yourusername</label>
    36. 

  36. <inputid="usernamesignup"name="usernamesignup"required="required"type="text"placeholder="mysuperusername690"/>
    37. 

  37. </p>
    38. 

  38. <p>
    39. 

  39. <labelfor="emailsignup"class="youmail"data-icon="e">Youremail</label>
    40. 

  40. <inputid="emailsignup"name="emailsignup"required="required"type="email"placeholder="mysupermail@mail.com"/>
    41. 

  41. </p>
    42. 

  42. <p>
    43. 

  43. <labelfor="passwordsignup"class="youpasswd"data-icon="p">Yourpassword</label>
    44. 

  44. <inputid="passwordsignup"name="passwordsignup"required="required"type="password"placeholder="eg.X8df!90EO"/>
    45. 

  45. </p>
    46. 

  46. <p>
    47. 

  47. <labelfor="passwordsignup_confirm"class="youpasswd"data-icon="p">Pleaseconfirmyourpassword</label>
    48. 

  48. <inputid="passwordsignup_confirm"name="passwordsignup_confirm"required="required"type="password"placeholder="eg.X8df!90EO"/>
    49. 

  49. </p>
    50. 

  50. <pclass="signinbutton">
    51. 

  51. <inputtype="submit"value="Signup"/>
    52. 

  52. </p>
    53. 

  53. <pclass="change_link">
    54. 

  54. Alreadyamember?
    55. 

  55. <ahref="#tologin"class="to_register">Goandlogin</a>
    56. 

  56. </p>
    57. 

  57. </form>
    58. 

  58. </div>
    59. 

    60. 

  60. </div>
    61. 

  61. </div>
    62.

可以看到在上面的代码中，使用了一些HTML5不错的新功能。比如在input type方面，实现密码自动隐藏用户键入点替换(当然这取决于浏览器是否支持)。用浏览器检查输入类型的电子邮件是否是正确格式等。

有两个环节要记住。你可能已经注意到表单项部的两个<a href>链接。当我们点击并触发目标伪类时，我们就能通过“锚”标记（HTML中一种跳转定位方式，一般用于长网页）在原网页中跳到合适的位置，而不用另打开一个新网页。第二个动作与所用图标、字体相关。我们为显示的图标使用一个数据属性。在HTML中通过设置“icon_character”，就可以选择一个CSS来控制所有的图标风格样式。（这里对于锚标记的使用可能会有些糊涂，但看到后面就会明白了。）

CSS部分

这里将会出现一些CSS3的技巧代码，请注意，可能有的浏览器目前还不支持CSS3而无法正常显示。

两个CSS定义。（后面会说明为什么要定义两个CSS的原因。）

首先，为需要显示的区域定义一个外观。

    

  1. #subscribe,
    2. 

  2. #login{
    3. 

  3. position:absolute;
    4. 

  4. top:0px;
    5. 

  5. width:88%;
    6. 

  6. padding:18px6%60px6%;
    7. 

  7. margin:0035px0;
    8. 

  8. background:rgb(247,247,247);
    9. 

  9. border:1pxsolidrgba(147,184,189,0.8);
    10. 

  10. box-shadow:
    11. 

  11. 0pt2px5pxrgba(105,108,109,0.7),
    12. 

  12. 0px0px8px5pxrgba(208,223,226,0.4)inset;
    13. 

  13. border-radius:5px;
    14. 

  14. }
    15. 

  15. #login{
    16. 

  16. z-index:22;
    17. 

  17. }
    18.

这里定义了投影，以及如文章开始的那张图上所示的蓝色辉光。并赋值z-index为22。

下面是关于背景图片样式的代码：

    

  1. /****generaltextstyling****/
    2. 

  2. #wrapperh1{
    3. 

  3. font-size:48px;
    4. 

  4. color:rgb(6,106,117);
    5. 

  5. padding:2px010px0;
    6. 

  6. font-family:'FranchiseRegular','ArialNarrow',Arial,sans-serif;
    7. 

  7. font-weight:bold;
    8. 

  8. text-align:center;
    9. 

  9. padding-bottom:30px;
    10. 

  10. }
    11. 

    12. 

  12. /**Forthemomentonlywebkitsupportsthebackground-clip:text;*/
    13. 

  13. #wrapperh1{
    14. 

  14. background:
    15. 

  15. -webkit-repeating-linear-gradient(-45deg,
    16. 

  16. rgb(18,83,93),
    17. 

  17. rgb(18,83,93)20px,
    18. 

  18. rgb(64,111,118)20px,
    19. 

  19. rgb(64,111,118)40px,
    20. 

  20. rgb(18,83,93)40px);
    21. 

  21. -webkit-text-fill-color:transparent;
    22. 

  22. -webkit-background-clip:text;
    23. 

  23. }
    24. 

    25. 

  25. #wrapperh1:after{
    26. 

  26. content:'';
    27. 

  27. display:block;
    28. 

  28. width:100%;
    29. 

  29. height:2px;
    30. 

  30. margin-top:10px;
    31. 

  31. background:
    32. 

  32. linear-gradient(left,
    33. 

  33. rgba(147,184,189,0)0%,
    34. 

  34. rgba(147,184,189,0.8)20%,
    35. 

  35. rgba(147,184,189,1)53%,
    36. 

  36. rgba(147,184,189,0.8)79%,
    37. 

  37. rgba(147,184,189,0)100%);
    38. 

  38. }
    39.

注意，由于目前只有WebKit浏览器支持background-clip: text，为了在适应不同浏览器，还要创建一个H1标题样式：带条纹背景的文本样式。由于background-clip: text只适用于WebKit，所以这里用WebKit作前缀，这也是为什么要把CSS分成两部分，并只使用来定义的原因。用WebKit作前缀是不太好的做法，仅用于这种演示示例。现在，WebKit的文本颜色透明度属性可以派上用场了：它可以实现透明效果的背景样式。

表单上，标题下方那条水平线的样式也由一个after伪类控制。这里使用了一个2px的高度和两边淡出的效果。

现在，接着进行样式定义。

    

  1. /****advancedinputstyling****/
    2. 

  2. /*placeholder*/
    3. 

  3. ::-webkit-input-placeholder{
    4. 

  4. color:rgb(190,188,188);
    5. 

  5. font-style:italic;
    6. 

  6. }
    7. 

  7. input:-moz-placeholder,
    8. 

  8. textarea:-moz-placeholder{
    9. 

  9. color:rgb(190,188,188);
    10. 

  10. font-style:italic;
    11. 

  11. }
    12. 

  12. input{
    13. 

  13. outline:none;
    14. 

  14. }
    15.

为输入样式定义outline属性，以便用户能迅速输入正确信息。如果你不打算定义outline，那也应该使用 :active 和 :focus来定义这些输入样式的状态。

    

  1. /*alltheinputexceptsubmitandcheckbox*/
    2. 

  2. #wrapperinput:not([type="checkbox"]){
    3. 

  3. width:92%;
    4. 

  4. margin-top:4px;
    5. 

  5. padding:10px5px10px32px;
    6. 

  6. border:1pxsolidrgb(178,178,178);
    7. 

  7. box-sizing:content-box;
    8. 

  8. border-radius:3px;
    9. 

  9. box-shadow:0px1px4px0pxrgba(168,168,168,0.6)inset;
    10. 

  10. transition:all0.2slinear;
    11. 

  11. }
    12. 

  12. #wrapperinput:not([type="checkbox"]):active,
    13. 

  13. #wrapperinput:not([type="checkbox"]):focus{
    14. 

  14. border:1pxsolidrgba(91,90,90,0.7);
    15. 

  15. background:rgba(238,236,240,0.2);
    16. 

  16. box-shadow:0px1px4px0pxrgba(168,168,168,0.9)inset;
    17. 

  17. }
    18.

这里我们并不全是用伪类去定义输入样式，除了checkbox。因为删除了outline属性，所以这里使用了 a :focus 和:active 状态定义。自从不再为输入样式使用:before 和 :after伪类后，就使用图标的label标签进行设置。这里使用了fontomas库中的一些漂亮图标。还记得data-icon 的属性吗？要把信息传递到正确的地方。这里使用data-icon=’u’ 来表示用户， ‘e’ 表示email, ‘p’ 表示密码。一旦确定的信件，下载字体，用fontsquirrel字体引擎将这些信息转换成@font-face兼容格式。

    

  1. @font-face{
    2. 

  2. font-family:'FontomasCustomRegular';
    3. 

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

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

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

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

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

  8. font-weight:normal;
    9. 

  9. font-style:normal;
    10. 

  10. }
    11. 

    12. 

  12. /**themagicicontrick!**/
    13. 

  13. [data-icon]:after{
    14. 

  14. content:attr(data-icon);
    15. 

  15. font-family:'FontomasCustomRegular';
    16. 

  16. color:rgb(106,159,171);
    17. 

  17. position:absolute;
    18. 

  18. left:10px;
    19. 

  19. top:35px;
    20. 

  20. width:30px;
    21. 

  21. }
    22.

不用为每个图标指定一个类，而是使用content: attr(data-icon) 来检查data-icon属性信息。所以只需要定义字体、颜色和位置。

现在，为两个表单中的提交按钮定义样式。

    

  1. /*stylingbothsubmitbuttons*/
    2. 

  2. #wrapperp.buttoninput{
    3. 

  3. width:30%;
    4. 

  4. cursor:pointer;
    5. 

  5. background:rgb(61,157,179);
    6. 

  6. padding:8px5px;
    7. 

  7. font-family:'BebasNeueRegular','ArialNarrow',Arial,sans-serif;
    8. 

  8. color:#fff;
    9. 

  9. font-size:24px;
    10. 

  10. border:1pxsolidrgb(28,108,122);
    11. 

  11. margin-bottom:10px;
    12. 

  12. text-shadow:01px1pxrgba(0,0,0,0.5);
    13. 

  13. border-radius:3px;
    14. 

  14. box-shadow:
    15. 

  15. 0px1px6px4pxrgba(0,0,0,0.07)inset,
    16. 

  16. 0px0px0px3pxrgb(254,254,254),
    17. 

  17. 0px5px3px3pxrgb(210,210,210);
    18. 

  18. transition:all0.2slinear;
    19. 

  19. }
    20. 

  20. #wrapperp.buttoninput:hover{
    21. 

  21. background:rgb(74,179,198);
    22. 

  22. }
    23. 

  23. #wrapperp.buttoninput:active,
    24. 

  24. #wrapperp.buttoninput:focus{
    25. 

  25. background:rgb(40,137,154);
    26. 

  26. position:relative;
    27. 

  27. top:1px;
    28. 

  28. border:1pxsolidrgb(12,76,87);
    29. 

  29. box-shadow:0px1px6px4pxrgba(0,0,0,0.2)inset;
    30. 

  30. }
    31. 

  31. p.login.button,
    32. 

  32. p.signin.button{
    33. 

  33. text-align:right;
    34. 

  34. margin:5px0;
    35. 

  35. }
    36.

这里是一个创建边框投影的技巧，你可以随意设置一条或多条边框投影。这里使用length value来创建一个“假”的第二条边框，宽度为3px，无模糊效果。接着定义复选框的样式：

    

  1. /*stylingthecheckbox"keepmeloggedin"*/
    2. 

  2. .keeplogin{
    3. 

  3. margin-top:-5px;
    4. 

  4. }
    5. 

  5. .keeplogininput,
    6. 

  6. .keeploginlabel{
    7. 

  7. display:inline-block;
    8. 

  8. font-size:12px;
    9. 

  9. font-style:italic;
    10. 

  10. }
    11. 

  11. .keeplogininput#loginkeeping{
    12. 

  12. margin-right:5px;
    13. 

  13. }
    14. 

  14. .keeploginlabel{
    15. 

  15. width:80%;
    16. 

  16. }
    17.

为表单使用重复线性渐变的样式，以实现条纹背景效果。

    

  1. p.change_link{
    2. 

  2. position:absolute;
    3. 

  3. color:rgb(127,124,124);
    4. 

  4. left:0px;
    5. 

  5. height:20px;
    6. 

  6. width:440px;
    7. 

  7. padding:17px30px20px30px;
    8. 

  8. font-size:16px;
    9. 

  9. text-align:right;
    10. 

  10. border-top:1pxsolidrgb(219,229,232);
    11. 

  11. border-radius:005px5px;
    12. 

  12. background:rgb(225,234,235);
    13. 

  13. background:repeating-linear-gradient(-45deg,
    14. 

  14. rgb(247,247,247),
    15. 

  15. rgb(247,247,247)15px,
    16. 

  16. rgb(225,234,235)15px,
    17. 

  17. rgb(225,234,235)30px,
    18. 

  18. rgb(247,247,247)30px
    19. 

  19. );
    20. 

  20. }
    21. 

  21. #wrapperp.change_linka{
    22. 

  22. display:inline-block;
    23. 

  23. font-weight:bold;
    24. 

  24. background:rgb(247,248,241);
    25. 

  25. padding:2px6px;
    26. 

  26. color:rgb(29,162,193);
    27. 

  27. margin-left:10px;
    28. 

  28. text-decoration:none;
    29. 

  29. border-radius:4px;
    30. 

  30. border:1pxsolidrgb(203,213,214);
    31. 

  31. transition:all0.4slinear;
    32. 

  32. }
    33. 

  33. #wrapperp.change_linka:hover{
    34. 

  34. color:rgb(57,191,215);
    35. 

  35. background:rgb(247,247,247);
    36. 

  36. border:1pxsolidrgb(74,179,198);
    37. 

  37. }
    38. 

  38. #wrapperp.change_linka:active{
    39. 

  39. position:relative;
    40. 

  40. top:1px;
    41. 

  41. }
    42.

现在，我们已经定义了两个漂亮的样式了，但在一个时间段里，只需要显示一个。所以，现在用动画效果来实现。

创建切换动画

首先是将不透明度设为0以隐藏表单：

    

  1. #register{
    2. 

  2. z-index:21;
    3. 

  3. opacity:0;
    4. 

  4. }
    5.

还记得吗？前面登录表单中z-index的值为22。上面这段代码的动作是把z-index的值定义为21，让它可以处在登录表单的上一层（指显示顺序，数字小的显示在前面）。

重点部分:target目标伪类。这里将使用“锚”进行两个表单间的显示过渡。“锚”链接的一般用法，是在页面上的两处实现跳转。但这里并不希望跳转到别处，只需要表单显示的切换。这里的诀窍在于表单顶部的两个小环节中，当点击“锚”标记时，触发第一个表单的显示设置“none”。这样，就避免了任何的页面跳转。

    

  1. #toregister:target~#wrapper#register,
    2. 

  2. #tologin:target~#wrapper#login{
    3. 

  3. z-index:22;
    4. 

  4. animation-name:fadeInLeft;
    5. 

  5. animation-delay:.1s;
    6. 

  6. }
    7.

当点击登录表单上的“Join us”按钮时，就会触发 #toregister，然后通过选择找到#register，激活动画fadeInLeft。使隐藏的表单慢慢显现出来，并同时改变其z-index值，让这个表单出现在其它表单的上面。

下面是实现这种动画样式的代码。

    

  1. .animate{
    2. 

  2. animation-duration:0.5s;
    3. 

  3. animation-timing-function:ease;
    4. 

  4. animation-fill-mode:both;
    5. 

  5. }
    6. 

  6. @keyframesfadeInLeft{
    7. 

  7. 0%{
    8. 

  8. opacity:0;
    9. 

  9. transform:translateX(-20px);
    10. 

  10. }
    11. 

    12. 

  12. 100%{
    13. 

  13. opacity:1;
    14. 

  14. transform:translateX(0);
    15. 

  15. }
    16. 

  16. }
    17.

表单用“disappearing”的动画形式从左边淡出：

    

  1. #toregister:target~#wrapper#login,
    2. 

  2. #tologin:target~#wrapper#register{
    3. 

  3. animation-name:fadeOutLeftBig;
    4. 

  4. }
    5. 

    6. 

  6. @keyframesfadeOutLeft{
    7. 

  7. 0%{
    8. 

  8. opacity:1;
    9. 

  9. transform:translateX(0);
    10. 

  10. }
    11. 

    12. 

  12. 100%{
    13. 

  13. opacity:0;
    14. 

  14. transform:translateX(-20px);
    15. 

  15. }
    16. 

  16. }
    17.

上面的动画实现代码来自Dan Eden的 animate.css，把其中的动画名称修改为自己的表单对象就可以实现。里面还有一些其他的自定义动画。

（需要注意的是，有些浏览器还不支持background-clip: text。IE9中，过渡和动画效果就无法显示，IE8及更低版本的浏览器还不支持CSS3中的伪类。）

英文原址：tympanus.net

实例演示地址：

从左开始渐变显示的动画效果

从左滑动呈现的动画效果

从小放大的动画效果

点击开始源代码下载

文章来自csdn

分享到：
| 手机浏览器HTML5测试：三星Tizen居冠、Ma ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics