建站

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

林浩楠 · 3月28日 · 2018年 · · · · 21次已读

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的)

效果如下

彩虹动画

4 条回应
  1. T2018-6-13 · 22:30

    更不爽了

  2. 蛋糕2018-3-29 · 0:25

    我试了很不错。 🙂

    • 林浩楠2018-6-13 · 23:35

      哈哈,喜欢就好