2核1G3M服务器88一季度

腾讯云,阿里云百度云等 折扣价→点我←

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

公共账号 管理员组

/*

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

Copyright (c) 2011 Dan Eden

*/

.animated {
    -webkit-animation-duration: 1s;
           -moz-animation-duration: 1s;
            -ms-animation-duration: 1s;
             -o-animation-duration: 1s;
                animation-duration: 1s;

}

.animated.hinge {
        -webkit-animation-duration: 2s;
           -moz-animation-duration: 2s;
            -ms-animation-duration: 2s;
             -o-animation-duration: 2s;
                animation-duration: 2s;
}


@-webkit-keyframes fadeInUp {
        0% {
                opacity: 0;
                -webkit-transform: translateY(20px);
        }
        
        100% {
                opacity: 1;
                -webkit-transform: translateY(0);
        }
}

@-moz-keyframes fadeInUp {
        0% {
                opacity: 0;
                -moz-transform: translateY(20px);
        }
        
        100% {
                opacity: 1;
                -moz-transform: translateY(0);
        }
}

@-ms-keyframes fadeInUp {
        0% {
                opacity: 0;
                -ms-transform: translateY(20px);
        }
        
        100% {
                opacity: 1;
                -ms-transform: translateY(0);
        }
}

@-o-keyframes fadeInUp {
        0% {
                opacity: 0;
                -o-transform: translateY(20px);
        }
        
        100% {
                opacity: 1;
                -o-transform: translateY(0);
        }
}

@keyframes fadeInUp {
        0% {
                opacity: 0;
                transform: translateY(20px);
        }
        
        100% {
                opacity: 1;
                transform: translateY(0);
        }
}

.fadeInUp {
        -webkit-animation-name: fadeInUp;
        -moz-animation-name: fadeInUp;
        -ms-animation-name: fadeInUp;
        -o-animation-name: fadeInUp;
        animation-name: fadeInUp;
}
参考效果:http://bbs.ntrqq.net/template/wi ... n/extend_common.css
站长窝论坛版权声明 1、本帖标题:Discuz X3.3 X3.2 Animate.css实现帖子列表页动画渐变效果
2、论坛网址:站长窝论坛
3、站长窝论坛的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、站长窝论坛一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本帖由公共账号在站长窝论坛《程序综合区》版块原创发布, 转载请注明出处!
评论
最新回复 (38)
返回
发新帖