1234下一页
返回列表 发新帖
查看: 2421|回复: 38

Discuz X3.3 X3.2 Animate.css实现帖子列表页动画渐变效果

[复制链接]

6671

热度

1万

元宝

262

贡献

管理员

DZ专员

发表于 2014-10-4 09:20:00 | 显示全部楼层 |阅读模式
  1. /*

  2. Animate.css - http://daneden.me/animate
  3. LICENSED UNDER THE  MIT LICENSE (MIT)

  4. Copyright (c) 2011 Dan Eden

  5. */

  6. .animated {
  7.     -webkit-animation-duration: 1s;
  8.            -moz-animation-duration: 1s;
  9.             -ms-animation-duration: 1s;
  10.              -o-animation-duration: 1s;
  11.                 animation-duration: 1s;

  12. }

  13. .animated.hinge {
  14.         -webkit-animation-duration: 2s;
  15.            -moz-animation-duration: 2s;
  16.             -ms-animation-duration: 2s;
  17.              -o-animation-duration: 2s;
  18.                 animation-duration: 2s;
  19. }


  20. @-webkit-keyframes fadeInUp {
  21.         0% {
  22.                 opacity: 0;
  23.                 -webkit-transform: translateY(20px);
  24.         }
  25.         
  26.         100% {
  27.                 opacity: 1;
  28.                 -webkit-transform: translateY(0);
  29.         }
  30. }

  31. @-moz-keyframes fadeInUp {
  32.         0% {
  33.                 opacity: 0;
  34.                 -moz-transform: translateY(20px);
  35.         }
  36.         
  37.         100% {
  38.                 opacity: 1;
  39.                 -moz-transform: translateY(0);
  40.         }
  41. }

  42. @-ms-keyframes fadeInUp {
  43.         0% {
  44.                 opacity: 0;
  45.                 -ms-transform: translateY(20px);
  46.         }
  47.         
  48.         100% {
  49.                 opacity: 1;
  50.                 -ms-transform: translateY(0);
  51.         }
  52. }

  53. @-o-keyframes fadeInUp {
  54.         0% {
  55.                 opacity: 0;
  56.                 -o-transform: translateY(20px);
  57.         }
  58.         
  59.         100% {
  60.                 opacity: 1;
  61.                 -o-transform: translateY(0);
  62.         }
  63. }

  64. @keyframes fadeInUp {
  65.         0% {
  66.                 opacity: 0;
  67.                 transform: translateY(20px);
  68.         }
  69.         
  70.         100% {
  71.                 opacity: 1;
  72.                 transform: translateY(0);
  73.         }
  74. }

  75. .fadeInUp {
  76.         -webkit-animation-name: fadeInUp;
  77.         -moz-animation-name: fadeInUp;
  78.         -ms-animation-name: fadeInUp;
  79.         -o-animation-name: fadeInUp;
  80.         animation-name: fadeInUp;
  81. }
复制代码
游客,如果您要查看本帖隐藏内容请回复

101

热度

160

元宝

0

贡献

步入草根

发表于 2014-10-26 00:27:31 | 显示全部楼层
看看是什么好宋希

996

热度

1370

元宝

108

贡献

步入草根

灌水之王

发表于 2015-1-2 10:41:49 | 显示全部楼层
怎么使用  

1

热度

12

元宝

0

贡献

步入草根

发表于 2015-1-5 02:46:18 | 显示全部楼层
求快看看看看看看看看看看

5

热度

2

元宝

0

贡献

步入草根

发表于 2015-2-10 16:15:15 | 显示全部楼层
我想下载,谢谢,这是我一直找的东西

5

热度

2

元宝

0

贡献

步入草根

发表于 2015-2-10 16:16:37 | 显示全部楼层
没有效果么?怎么用啊

268

热度

308

元宝

41

贡献

步入草根

发表于 2015-4-6 13:18:14 | 显示全部楼层
不知道怎么用

1654

热度

2498

元宝

92

贡献

步入草根

论坛元老热心会员灌水之王

发表于 2015-4-11 14:47:20 | 显示全部楼层
我看下在哪里改

91

热度

102

元宝

18

贡献

步入草根

发表于 2015-6-14 17:49:07 | 显示全部楼层
支持                        

583

热度

1617

元宝

56

贡献

终身ViP

发表于 2015-6-17 10:33:52 | 显示全部楼层
实现帖子列表页动画
下一页 »
1234下一页
返回列表 发新帖
 懒得打字嘛,点击右侧快捷回复【最新发布】   【赞助草根吧享更多权益】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

收藏帖子 返回列表 搜索

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

小黑屋|手机版|草根吧