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 Github Hexo IDEA JavaScript jsDeliver JS樱花特效 JVM Linux Live2D markdown Maven MyBatis MyBatis-plus MySQL Navicat Oracle Pictures QQ Sakura SEO Spring Boot Spring Cloud Spring Cloud Alibaba SpringMVC Thymeleaf Vue Web WebSocket Wechat Social WordPress Yoast SEO 代理 分页 图床 小幸运 通信原理