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

标题: 让你的论坛动起来最新版【css3+html5】 [打印本页]
作者: flashroad    时间: 2018-8-28 14:09     标题: 让你的论坛动起来最新版【css3+html5】

【版权】
http://bone.joinbbs.net/viewthread.php?tid=22
作者: flashroad    时间: 2018-8-28 14:09     标题: 在其他头部信息中加入下面的代码即可：

  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>
复制
作者: flashroad    时间: 2018-10-10 22:49

我来了.....




欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/) Powered by Discuz! 7.2