最近比较忙,发现主题更新到了3.3.8,我要先把我现在的主题改动做完再升级不然自己都会忘记

1.评论区图片自定义

.comment-respond textarea {
    background-image: url(https://view.moezx.cc/images/2018/03/24/comment-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    resize: vertical
}

将这代码中的url改成自己自定义图片 然后可以加在自定义css里面,当然也可以改动源代码在style.css里3476行左右

2.首页波浪和箭头效果

yremp大大写的食用书:原地址

波浪

在style.css最后加上这段代码

# 商业转载请联系作者获得授权,非商业转载请注明出处。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 协议(License):署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
# 作者(Author):内河
# 链接(URL):https://www.ltyzqhh.top/?p=245&preview=true
# 来源(Source):一个站台

@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
    50%{ left:0px;bottom:0px}
    100%{ left:-1500px;bottom:-5px}
}

@-webkit-keyframes wave2
{
0% { left:-1450px}
    50%{ left:0px}
    100%{left:-1450px}

}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-1500px;bottom:-5px}
    50%{ left:0px;bottom:0px}
    100%{ left:-1500px;bottom:-5px}
}

@keyframes wave2
{
0% { left:-1450px}
    50%{ left:0px}
    100%{left:-1450px}

}
#banner_wave_1 {
    width:auto;
    height:65px;
    background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
    _filter:alpha(opacity=80);
    position:absolute;
    bottom:0;
    width:400%;
    left:-236px;
    z-index:5;
    opacity:1;
    transiton-property:opacity,bottom;
    animation:wave1 90s infinite;
    -webkit-animation:wave1 90s infinite;
}
#banner_wave_2 {
    width:auto;
    height:80px;
    background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
    _filter:alpha(opacity=80);
    position:absolute;
    bottom:0;
    width:400%;
    left:0;
    z-index:4;
    opacity:1;
    transiton-property:opacity,bottom;
    animation:wave2 90s infinite;
    -webkit-animation:wave2 90s infinite;
}
.banner_wave_hide,.banner_wave_hide_fit_skin {
    opacity:0 !important;
    bottom:-999px !important
}
@media(max-width:860px) {
    #banner_wave_1,#banner_wave_2 {
    display:inline-block;

}
@-webkit-keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
    50%{ left:0px;bottom:0px}
    100%{ left:-750px;bottom:-2px}
}

@-webkit-keyframes wave2
{
0% { left:-750px}
    50%{ left:0px}
    100%{left:-750px}

}
@keyframes wave1/*Safari and Chrome*/
{
0% { left:-750px;bottom:-2px}
    50%{ left:0px;bottom:0px}
    100%{ left:-750px;bottom:-2px}
}

@keyframes wave2
{
0% { left:-750px}
    50%{ left:0px}
    100%{left:-750px}

}
#banner_wave_1 {
    width:auto;
    height:65px;
    background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave1.png") repeat-x;
    _filter:alpha(opacity=80);
    position:absolute;
    bottom:0;
    width:400%;
    left:750px;
    z-index:5;
    opacity:1;
    transiton-property:opacity,bottom;
    animation:wave1 90s infinite;
    -webkit-animation:wave1 60s infinite;
}
#banner_wave_2 {
    width:auto;
    height:80px;
    background:url("https://cdn.jsdelivr.net/gh/yremp/resource@2.0/img/other/wave2.png") repeat-x;
    _filter:alpha(opacity=80);
    position:absolute;
    bottom:0;
    width:400%;
    left:0;
    z-index:4;
    opacity:1;
    transiton-property:opacity,bottom;
    animation:wave2 90s infinite;
    -webkit-animation:wave2 60s infinite;
 }
}

然后在到header.php加入代码

<div id="banner_wave_1"></div>
<div id="banner_wave_2"></div>

具体加在这
11

箭头

首先在Sakura主题文件 layouts下面imgbox.php添加如下代码

<div class="headertop-down faa-float animated" onclick="headertop_down()"><span><i class="fa fa-chevron-down" aria-hidden="true"></i></span></div>

具体在

然后在style.css里面加入下面的css代码

/* 首页下拉箭头样式*/
.headertop-bar::after {
    content: '';
    width: 150%;
    height: 4.375rem;
    background: #fff;
    left: -25%;
    bottom: -2.875rem;
    border-radius: 100%;
    position: absolute;
    z-index: 4;
}

.headertop-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    cursor: pointer;
    z-index: 5;
}
@media (max-width: 860px) {
    .headertop-down {
        display: none
    }
}

.headertop-down i {
    font-size: 28px;
    color: #fff;
    -ms-transform: scale(1.5,1); /* IE 9 */
    -webkit-transform: scale(1.5,1); /* Safari */
    transform: scale(1.5,1); /* Standard syntax */
}

然后在sakura-app.js 里面(最后位置就行)加入下面的js代码实现点击下拉效果

/* 首页箭头下拉效果 */
function headertop_down() {
    var coverOffset = $('#content').offset().top;
    $('html,body').animate({
        scrollTop: coverOffset
    },
    600);
}

3.手机端aplayer打开

打开sakura-app.js
大概在858哪里把判断条件删除只留下

aplayerF();

就ok了


一个乐天派的逗比~