人间 344 3

    背景按钮美化笔记

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

    截图1
    截图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
    截图2

    截图3
    截图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]

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

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

    Meteor
    风记得一朵花的香.
    1. 天之文博客

      2022-05-01 13:09

      看看

    2. Mr.Chou

      2021-03-13 19:44

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

        1. Meteor

          2021-03-13 20:01
          @Mr.Chou

          :@(脸红)