为Flarum新建话题按钮添加彩虹渐变动画

    1,627

Flarum天生漂亮,无可挑剔。

但是他的新建话题按钮看起来有点不爽,虽然会随着不同的节点变色,但是,就是不爽。

于是我从Flarum官网搜来了美化代码,现在我们来给他添加点css,改变下它的外观,哼哼

进入后台-外观配置-自定义样式,然后添加如下代码

.IndexPage-newDiscussion { 
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
color: #fff;
background-size: 1800% 1800%;
-webkit-animation: rainbow 15s ease infinite;
-z-animation: rainbow 15s ease infinite;
-o-animation: rainbow 15s ease infinite;
  animation: rainbow 15s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

刷新浏览器缓存,然后刷新下你用Flarum搭建的网站,看看有什么新变化吧(记得是F5刷新。Flarum使用了pjax无刷新加载技术,没有刷新整个网页的话是不会重新加载css的)

效果如下

彩虹动画

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息