为Flarum新建话题按钮添加彩虹渐变动画
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的)
效果如下