Wordpress Sakura主题首页添加波浪和箭头

Wordpress主题Sakura自己刚刚安装很多东西都是没有的，首页的波浪滚动效果，还有那个浮动的箭头都是没有的，想要自己加上不熟悉这个主题的会比较困难。下面给大家介绍一下 Wordpress Sakura主题首页添加波浪和箭头 。

注意事项

注意请注意在主题后台开启调用本地js、css，因为需要自己修改代码 ，主题自带的CDN应该是白猫的github仓库，这样你修改了也没用。所以要启用本地js、css调用。

波浪效果添加

Step 1 添加html元素

首先去主题文件夹下面的header.php加入下面的两行代码，

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

可以参考我的位置

Step 2 添加相关样式

然后去Sakura主题文件夹下面找到style.css打开在最后加入以下代码，（也可以在wp后台外观里面自定义css加入下面的代码）这个关键帧动画效果是我自己写的，效果可能不是那么好。

@-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;
 }
}

文件保存一下，刷新网页应该就可以了。

添加下拉箭头

这个箭头添加和波浪效果类似,添加对应的html标签、css以及js

Step 1 添加Html元素

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

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

参考示例

Step 2 添加相关样式

在Sakura主题文件夹下面的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 */
}

Step 3 添加点击下拉JS代码

在Sakura主题文件夹下js里面的sakura-app.js代码最后添加下面的代码

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

现在基本就大功告成了

标签云

ajax AOP Bootstrap cdn Chevereto CSS Docker Editormd GC Hexo IDEA IPA JavaScript jsDeliver JS樱花特效 JVM Linux markdown Maven MyBatis MyBatis-plus MySQL Pictures Sakura SEO shadowrocket Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC SSR Thymeleaf V2ray Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 苹果iOS国外账号 苹果IOS账号