getWeather({"success":"1","result":[{"cityno":"shanghai"}) 爱秀代码 - Powered by Discuz! Board
免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [求助] 大家都来研究一下这个Html5特效CSS代码 [打印本页]
作者: 麻城生活网    时间: 2018-12-2 11:09     标题: 大家都来研究一下这个Html5特效CSS代码

本帖最后由 麻城生活网 于 2018-12-2 11:15 编辑

http://www.discuz.net/thread-3445351-1-1.html

按照帖子安装了一下   css以附件上传调用地址      没什么反应   也不知道是什么特效     所以上来发帖大家一起研究一下      很好奇
作者: 麻城生活网    时间: 2018-12-2 11:19

原文css代码
  1. @keyframes pop{
  2. 0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);}
  3. 60%{opacity:0.75;transform:scale(1.1);-ms-transform:scale(1.1);}
  4. 100%{opacity:1;transform:scale(1);-ms-transform:scale(1);}
  5. }
  6. @-moz-keyframes pop{
  7. 0%{opacity:0;-moz-transform:scale(0.2);}
  8. 60%{opacity:0.75;-moz-transform:scale(1.1);}
  9. 100%{opacity:1;-moz-transform:scale(1);}
  10. }
  11. @-webkit-keyframes pop{
  12. 0%{opacity:0;-webkit-transform:scale(0.2);}
  13. 60%{opacity:0.75;-webkit-transform:scale(1.1);}
  14. 100%{opacity:1;-webkit-transform:scale(1);}
  15. }
  16. @-o-keyframes pop{
  17. 0%{opacity:0;-o-transform:scale(0.2);}
  18. 60%{opacity:0.75;-o-transform:scale(1.1);}
  19. 100%{opacity:1;-o-transform:scale(1);}
  20. }
  21. @keyframes fastr{
  22. 0%{opacity:0;transform:translate(0,60px);}
  23. 100%{opacity:1;transform:translate(0,0);}
  24. }
  25. @-webkit-keyframes fastr{
  26. 0%{opacity:0;-webkit-transform:translate(0,60px);}
  27. 100%{opacity:1;-webkit-transform:translate(0,0);}
  28. }
  29. @-moz-keyframes fastr{
  30. 0%{opacity:0;-moz-transform:translate(0,60px);}
  31. 100%{opacity:1;-moz-transform:translate(0,0);}
  32. }
  33. @-o-keyframes fastr{
  34. 0%{opacity:0;-o-transform:translate(0,60px);}
  35. 100%{opacity:1;-o-transform:translate(0,0);}
  36. }
  37. @keyframes afastr{
  38. 0%{opacity:0;transform:translate(0,-60px);}
  39. 67%{opacity:1;transform:translate(0,0);}
  40. 86%{opacity:1;transform:translate(0,-2px);}
  41. 100%{opacity:1;transform:translate(0,0);}
  42. }
  43. @-webkit-keyframes afastr{
  44. 0%{opacity:0;-webkit-transform:translate(0,-60px);}
  45. 67%{opacity:1;-webkit-transform:translate(0,0);}
  46. 86%{opacity:1;-webkit-transform:translate(0,-2px);}
  47. 100%{opacity:1;-webkit-transform:translate(0,0);}
  48. }
  49. @-moz-keyframes afastr{
  50. 0%{opacity:0;-moz-transform:translate(0,-60px);}
  51. 67%{opacity:1;-moz-transform:translate(0,0);}
  52. 86%{opacity:1;-moz-transform:translate(0,-2px);}
  53. 100%{opacity:1;-moz-transform:translate(0,0);}
  54. }
  55. @-o-keyframes afastr{
  56. 0%{opacity:0;-o-transform:translate(0,-60px);}
  57. 67%{opacity:1;-o-transform:translate(0,0);}
  58. 86%{opacity:1;-o-transform:translate(0,-2px);}
  59. 100%{opacity:1;-o-transform:translate(0,0);}
  60. }
  61. .fwinmask{animation-duration:0.4s;-webkit-animation-duration:0.4s;animation-name:pop;-webkit-animation-name:pop;}
  62. .p_pop{animation-duration:0.2s;-webkit-animation-duration:0.2s;animation-name:afastr;-webkit-animation-name:afastr;}
  63. .fastpreview{animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-name:afastr;-webkit-animation-name:afastr;}
  64. .pct{animation-duration:0.5s;-webkit-animation-duration:0.5s;animation-name:fastr;-webkit-animation-name:fastr;}
  65. #hd h2{animation-duration:0.4s;-webkit-animation-duration:0.4s;animation-name:afastr;-webkit-animation-name:afastr;}
  66. #um,#toptb,.pns{animation-duration:1s;-webkit-animation-duration:1s;animation-name:afastr;-webkit-animation-name:afastr;}
  67. #hd h2{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;-o-transition:all .15s ease-out;}
  68. #hd h2:hover{transform:scale(1.07) rotate(-1deg);-webkit-transform:scale(1.07) rotate(-1deg);-moz-transform:scale(1.07) rotate(-1deg);-o-transform:scale(1.07) rotate(-1deg);}
  69. .avt{transition:all .15s ease-out;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;-o-transition:all .15s ease-out;}
  70. .avt:hover{transform:scale(1.07);-webkit-transform:scale(1.07);-moz-transform:scale(1.07);-o-transform:scale(1.07);}
  71. #scbar_txt{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease;}
  72. #scbar_txt:hover{width:450px;text-shadow:#585858 0px 0px 3px;}
  73. #scbar_txt:focus{width:450px;}
  74. #ls_username,#ls_password{transition:all 0.25s ease;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;-o-transition:all 0.25s ease;}
  75. #ls_username:focus,#ls_password:focus{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);}
  76. a{transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;}
  77. a:hover,a:visited:hover{text-shadow:#585858 0px 0px 3px;}
复制
其他头部信息：<link rel="stylesheet" type="text/css" href="CSS地址"/>
作者: 波斯佳人    时间: 2018-12-4 16:51

打破零回复



欢迎光临 爱秀代码 (http://icode.258club.com/) Powered by Discuz! 7.2