Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[修改] Html5特效CSS代码下载

[复制链接]
电脑基地 发表于 2013-8-29 13:08:46 | 显示全部楼层 |阅读模式
本帖最后由 电脑基地 于 2013-8-29 13:22 编辑

代码:
  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;}
复制代码
演示:
http://www.4140.com.cn/bbs/
使用方法:
全局 - SEO设置 - 其他 - 其他头部信息:
  1. <link rel="stylesheet" type="text/css" href="CSS地址"/>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

评分

1

查看全部评分

niuzheng12 发表于 2013-8-29 13:13:17 | 显示全部楼层

回帖奖励 +100 枚金币

提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

kx5000 发表于 2013-8-29 13:23:05 | 显示全部楼层

回帖奖励 +2 枚金币

提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

A_dmin 发表于 2013-8-29 13:45:33 | 显示全部楼层

回帖奖励 +2 枚金币

提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

小芸妮 发表于 2013-8-29 14:07:55 | 显示全部楼层

回帖奖励 +2 枚金币

我是来拿金币的。
回复

使用道具 举报

ygbh 发表于 2013-8-29 16:40:45 | 显示全部楼层

回帖奖励 +2 枚金币

没有演示噢,
回复

使用道具 举报

海选 发表于 2013-8-29 17:17:18 | 显示全部楼层

回帖奖励 +2 枚金币

我可以拿金币吗?
回复

使用道具 举报

1314学习网 发表于 2013-8-29 17:19:20 | 显示全部楼层

回帖奖励 +2 枚金币


我是来拿金币的。
回复

使用道具 举报

MAN(华剑) 发表于 2013-8-29 17:38:21 | 显示全部楼层

回帖奖励 +2 枚金币

好像蛮好看的。。。。。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-16 08:27 , Processed in 0.052908 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表