首页效果美化 Sakura主题美化（六）

首页添加下拉小箭头

本节参考了雾时之森的文章，在此表示感谢

修改imgbox.php

打开主题目录/layouts/imgbox.php，在最底下添加

echo bgvideo(); //BGVideo 
?>
<!-- 首页下拉箭头 -->
<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

打开style.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/sakura-app.js，在尾部添加

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

首页添加波浪动画

本节参考了千玖夜的文章，在此表示感谢

修改style.css

打开style.css，在尾部添加

#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://cdn.jsdelivr.net/gh/Fuukei/Sakurairo_Vision@2.4/basic/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;
    transition-duration: .4s,.4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#banner_wave_2 {
    width: auto;
    height: 80px;
    background: url(https://cdn.jsdelivr.net/gh/Fuukei/Sakurairo_Vision@2.4/basic/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;
    transition-duration: .4s,.4s;
    animation-name: move2;
    animation-duration: 160s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
@keyframes move1 {
  100%{
    background-position: 100% 0;
  }
}
 
@keyframes move2 {
  100%{
    background-position: -100% 0;
  }
}

为了避免波浪图像地址失效，可以自行Fork一份

修改imgbox.php

打开主题目录/layouts/imgbox.php，在开头图示位置插入下列代码

<style>.header-info::before{display: none !important;opacity: 0 !important;}</style>
<div id="banner_wave_1"></div><div id="banner_wave_2"></div> 

首页的一句话和社交卡片美化

本节部分参考了染川 瞳的文章，在此表示感谢

首页的一句话美化

打开style.css，添加下列代码到尾部

.header-info {
 width: 63%;
 margin: auto;
 font-size: 16px;
 color: #EE9CA7;  // 一句话的颜色（16进制色值）
 background: rgba(255,250,250,0.6); //文字框底色（红，绿，蓝，透明度）
 padding: 10px;  
 margin-top: 22px;   
 letter-spacing: 0;
 line-height: 30px;   
 border-radius: 10px;  
 box-sizing: initial;
 white-space: nowrap
 }

padding / margin-top / line-height / border-radius 四项为大小，可以自行调整，怎么调整好看就见仁见智吧

首页社交网站图标美化

打开style.css，添加下列代码到尾部

.top-social img {
 height: 40px;  //这是修改社交网络外图标的高
 width: 40px;  //这是修改社交网络外图标的宽 
 padding: 9px;  //这是修改社交网络图标的大小 
 background: rgba(255,250,250)  //这是背景颜色 
 }

打开主题目录/layouts/imgbox.php，如图所示，修改对应的社交网站的图标地址

这里推荐使用 染川 瞳 修改的图标，视觉效果很浪漫