免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [教學] 让你的论坛真正的动起来最新版【css3+html5】爱美必装 [打印本頁]
作者: Forever~    時間: 2014-6-21 22:27     標題: 让你的论坛真正的动起来最新版【css3+html5】爱美必装

本帖最後由 Forever~ 於 2014-8-1 14:56 編輯

预览地址：1.http://csdiy.66rt.com
               2.http://www.kwon891205.com

放在其他头部信息那里！
  1. <!--让你的论坛真正的动起来-->
  2. <style>
  3. @keyframes pop{
  4. 0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);}
  5. 60%{opacity:0.75;transform:scale(1.1);-ms-transform:scale(1.1);}
  6. 100%{opacity:1;transform:scale(1);-ms-transform:scale(1);}
  7. }
  8. @-moz-keyframes pop{
  9. 0%{opacity:0;-moz-transform:scale(0.2);}
  10. 60%{opacity:0.75;-moz-transform:scale(1.1);}
  11. 100%{opacity:1;-moz-transform:scale(1);}
  12. }
  13. @-webkit-keyframes pop{
  14. 0%{opacity:0;-webkit-transform:scale(0.2);}
  15. 60%{opacity:0.75;-webkit-transform:scale(1.1);}
  16. 100%{opacity:1;-webkit-transform:scale(1);}
  17. }
  18. @keyframes fastr{
  19. 0%{opacity:0;transform:translate(0,60px);}
  20. 100%{opacity:1;transform:translate(0,0);}
  21. }
  22. @-webkit-keyframes fastr{
  23. 0%{opacity:0;-webkit-transform:translate(0,60px);}
  24. 100%{opacity:1;-webkit-transform:translate(0,0);}
  25. }
  26. @-moz-keyframes fastr{
  27. 0%{opacity:0;-moz-transform:translate(0,60px);}
  28. 100%{opacity:1;-moz-transform:translate(0,0);}
  29. }
  30. @keyframes afastr{
  31. 0%{opacity:0;transform:translate(0,-60px);}
  32. 67%{opacity:1;transform:translate(0,0);}
  33. 86%{opacity:1;transform:translate(0,-2px);}
  34. 100%{opacity:1;transform:translate(0,0);}
  35. }
  36. @-webkit-keyframes afastr{
  37. 0%{opacity:0;-webkit-transform:translate(0,-60px);}
  38. 67%{opacity:1;-webkit-transform:translate(0,0);}
  39. 86%{opacity:1;-webkit-transform:translate(0,-2px);}
  40. 100%{opacity:1;-webkit-transform:translate(0,0);}
  41. }
  42. @-moz-keyframes afastr{
  43. 0%{opacity:0;-moz-transform:translate(0,-60px);}
  44. 67%{opacity:1;-moz-transform:translate(0,0);}
  45. 86%{opacity:1;-moz-transform:translate(0,-2px);}
  46. 100%{opacity:1;-moz-transform:translate(0,0);}
  47. }
  48. @keyframes fastscale{
  49. 0%{opacity:0;transform:scale(0.2,1) translate(-226px,0);}
  50. 100%{opacity:1;transform:scale(1,1) translate(0,0);}
  51. }
  52. @-webkit-keyframes fastscale{
  53. 0%{opacity:0;-webkit-transform:scale(0.2,1) translate(-226px,0);}
  54. 100%{opacity:1;-webkit-transform:scale(1,1) translate(0,0);}
  55. }
  56. @-moz-keyframes fastscale{
  57. 0%{opacity:0;-moz-transform:scale(0.2,1) translate(-226px,0);}
  58. 100%{opacity:1;-moz-transform:scale(1,1) translate(0,0);}
  59. }
  60. .fwinmask{animation:pop 0.4s;-moz-animation:pop 0.4s;-webkit-animation:pop 0.4s;}
  61. .p_pop{animation:afastr 0.2s;-moz-animation:afastr 0.2s;-webkit-animation:afastr 0.2s;}
  62. .popupmenu_popup{animation:afastr 0.2s;-moz-animation:afastr 0.2s;-webkit-animation:afastr 0.2s;}
  63. .fastpreview{animation:afastr 0.5s;-webkit-animation:afastr 0.5s;-moz-animation:afastr 0.5s;}
  64. .defaultpost{animation:fastr 0.5s;-webkit-animation:fastr 0.5s;-moz-animation:fastr 0.5s;}
  65. .tip{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
  66. .jfts{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
  67. .vipde{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
  68. .t_attach{animation:pop 0.3s;-webkit-animation:pop 0.3s;-moz-animation:pop 0.3s;}
  69. #header h2{animation:afastr 0.4s;-webkit-animation:afastr 0.4s;-moz-animation:afastr 0.4s;}
  70. #umenu,#Jasper_toptb,.moreconf,#jff{animation:afastr 1s;-webkit-animation:afastr 1s;-moz-animation:afastr 1s;}
  71. #header h2{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
  72. #header h2:hover{transform:scale(1.07) rotate(-1deg);-webkit-transform:scale(1.07) rotate(-1deg);-moz-transform:scale(1.07) rotate(-1deg);}
  73. .avt_y{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;}
  74. .avt_y:hover{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);}
  75. #scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
  76. #scbar_txt:focus,#scbar:hover #scbar_txt{width:450px}
  77. #ls_username,#ls_password{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;}
  78. #ls_username:focus,#ls_password:focus{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);}
  79. a{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
  80. a:hover,a:visited:hover{text-shadow:#585858 0px 0px 3px;text-decoration:none;}
  81. .fl_g:hover img{transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2);}

  83. .appl img,.fl_icn_g img{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
  84. .appl li:hover img{transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);}
  85. .userinfopanel{animation:fastscale 0.2s;-webkit-animation:fastscale 0.2s;-moz-animation:fastscale 0.2s;}
  86. </style>
複製代碼


原帖子：http://tlb.258club.com/viewthread.php?tid=3322&extra=&page=1
作者: superman1024    時間: 2014-6-22 17:09

感謝分享
作者: shiley1993    時間: 2014-6-23 21:46

感谢分享
作者: rosa1414    時間: 2014-6-27 01:48

好像很好玩。。。。收藏了、謝謝!
作者: shiley1993    時間: 2014-6-28 20:03

谢谢分享
作者: Kajes    時間: 2015-7-29 01:47

很好很好www
谢谢分享~~
作者: 542282595    時間: 2015-8-6 16:09

这是干嘛用的·
作者: 繽紛色彩    時間: 2016-4-15 00:42

兩個論壇都失效了



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2