忘记密码?

一键登录

草根吧源码论坛

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

查看: 1464|回复: 22

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

[复制链接]

5760

主题

704

热度

2174

贡献

管理员

Rank: 9Rank: 9Rank: 9

DZ专员

发表于 2014-10-4 09:20:00 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
  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. }
复制代码
游客,如果您要查看本帖隐藏内容请回复

帖子地址: 

本文来源于草根吧源码论坛 www.caogen8.co,欢迎大家下载。
如果您没有贡献需要充值,可以直接在线充值,点击充值
如果你需要加入本站赞助VIP会员,可以直接在线开通,点击开通
如果找不到您要的资源,请搜索一下,点击搜索
回复

举报

0

主题

101

热度

0

贡献

步入草根

Rank: 1

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

0

主题

994

热度

111

贡献

步入草根

Rank: 1

灌水之王

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

0

主题

1

热度

0

贡献

步入草根

Rank: 1

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

0

主题

5

热度

0

贡献

步入草根

Rank: 1

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

0

主题

5

热度

0

贡献

步入草根

Rank: 1

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

2

主题

255

热度

23

贡献

年费赞助ViP

Rank: 6Rank: 6

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

17

主题

1537

热度

23

贡献

核心会员

Rank: 9Rank: 9Rank: 9

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

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

1

主题

91

热度

2

贡献

步入草根

Rank: 1

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

11

主题

425

热度

39

贡献

终身赞助ViP

Rank: 7Rank: 7Rank: 7

发表于 2015-6-17 10:33:52 | 显示全部楼层
实现帖子列表页动画

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表