背景按钮美化笔记

  网课还有明天最后一天,下周就可以返校了。今天公休没课折腾博客,Pigeon我现在用的博客主题,很棒的主题,简约而不简单。上午在开往里偶然间路过了一个Hexo博客,他的背景是浅色渐变的,特别好看,于是扒了一下
也就是现在的样子,之前博客是可以设置一个固定颜色或者背景,这个浅色渐变就挺好的
截图1
代码如下更改博客background即可

[hide]

background: linear-gradient(90deg,rgba(247,149,51,.1) 0,rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1) 100%);

[/hide]

  紧接着又搞了一个动态渐变的样式,重温了一遍Css选择器才搞定:@(喜极而泣)都忘光了(今年折腾博客比较多,去年学了C3以后就挂在那里也没实战,现在用真是方恨少:@(哭泣))
评论那个真是,试了半个小时没搞出来,最后求主题作者@Novcu帮我定位的
#comment-form .comment-buttons #submitComment真他丫长:@(尴尬)
截图2
截图3
代码

[hide]

/* 渐变色滚动动画 */

@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;

}

50% {
background-position: 100% 50%;

}

100% {
background-position: 0 50%;

}

}

@-moz-keyframes Gradient {
0% {
background-position: 0 50%;

}

50% {
background-position: 100% 50%;

}

100% {
background-position: 0 50%;

}

}

@keyframes Gradient {
0% {
background-position: 0 50%;

}

50% {
background-position: 100% 50%;

}

100% {
background-position: 0 50%;

}

}
.paging_ajax_btn >.next ,#comment-form .comment-buttons #submitComment
{
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);

background-size: 400% 400%;

-webkit-animation: Gradient 10s ease infinite;

-moz-animation: Gradient 10s ease infinite;

animation: Gradient 10s ease infinite;

-o-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;



}

.paging_ajax_btn >.next,#comment-form .comment-buttons #submitComment
:before {
background-color: rgba(0, 0, 0, 0);

}

[/hide]

把里面的元素改了就好,这个感觉放在按钮上好看,单纯做背景感觉太“亮眼”

接下来应该不会做过多美化了,毕竟主题主打简约文字,也不喜欢破坏整体的风格
散会

标签:none上篇:基于UptimeRobot的友链状态监控下篇:Typecho评论添加“博主”“好友”认证

3 条评论

  1. 看看

  2. 不错,按钮还会变色,收藏有空折腾。

2025-03-28

努力感受生活

2020-10-24

祝自己生日快乐

2021-06-29

永远登峰造极

2022-09-06

最喜欢的季节

2021-01-12

博客开启Gzip享受火箭般的速度

2022-12-25

第三场雪

2021-03-05

Markdown语法(自常用)

2021-09-26

一言

2020-02-06

我的前端学习笔记(二)

2022-04-29

再看《医馆笑传》

2020-04-24

瞬感

2024-01-26

要如何订阅博客?

2020-06-10

治愈短文

2024-08-22

再游西游

2024-02-08

说说:#1707366114

2024-01-10

难熬的一个晚上

2020-12-31

2020·关键词

2022-11-16

两个我