RiPro美化教程

美化目录

1、logo扫光效果  2、按钮动态变色效果  3、滚动条样式  4、头像旋转  5、 运行时间  6、鼠标点击文字效果

7、底部QQ样式  8、其他按钮渐变色   9、首页推荐分类美化   10、底部纯文本文章列表  11、 文章标题优化  12、首页美化5栅格

13、加载圆圈效果  14、纯代码给文章添加管理员可见的百度是否收录

 友情提醒:

更新到3.2的请把diy.css样式复制到后台主题顶部设置-自定义CSS。

1、logo扫光效果 

添加目录wp-content/themes/ripro/assets/css  diy.css

/*
 * LOGO
*/
.logo-wrapper {
    position: relative;
    font-size:2em;
    font-weight:700;
    line-height:39px;
    overflow:hidden;
    margin:0;
}

.logo-wrapper::before{
    content:"";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite;
}

@-webkit-keyframes searchLights {
    0% { left: -90px; top: 0; }
    to { left: 90px; top: 0; }
}

2、按钮加动态渐变效果

添加目录wp-content/themes/ripro/assets/css diy.css

/**====按钮加彩====*/
button,html [type="reset"],[type="submit"] {
   /* -webkit-appearance: button;
   background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-animation: hue 6s infinite linear;*/
    display: inline-block;
    background: #42a7ff;
    background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));
    background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    vertical-align: top; 
}

.btn--primary,.btn--secondary,.label-default,.label-warning,.fa-angle-up,.rollbar-item tap-dark,.rollbar-item{
    display: inline-block;
    background: #42a7ff;
    background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));
    background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    vertical-align: top; 
}

.edit--profile-links li a.active {
    background: #42a7ff;
    background-image: -webkit-gradient(linear, left top, right top, from(#9c4dff), to(#42a7ff));
    background-image: -webkit-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: -o-linear-gradient(left, #9c4dff 0%, #42a7ff 100%);
    background-image: linear-gradient(90deg, #9c4dff 0%, #42a7ff 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    vertical-align: top;
}