首页添加波浪动画效果
1.使用CSS3 Animation复现
- 打开wp后台-外观-Sakura主题设置-基本设置-自定义css
在里面填入下方代码
/* 首页浮动波浪动画 */
#banner_wave_1 {
width: auto;
height: 65px;
background: url(https://view.amogu.cn/images/2020/08/30/wave_1.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://view.amogu.cn/images/2020/08/30/wave_2.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;
}
/* move1和move2只是方向不同，根据喜好自选即可。 */
/* 没做浏览器适配，具体哪些浏览器会生效未知，反正Chrome没什么问题。*/
@keyframes move1 {
100% {
background-position: 100% 0;
}
}
@keyframes move2 {
100% {
background-position: -100% 0;
}
}
2.两个DIV的穿插位置
- 在路径 /wp-content/themes/Sakura/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><!--两个DIV插在这。-->
给首页添加下拉小箭头
- 修改
imgbox.php文件
找到路径/wp-content/themes/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>
<!-- 首页下拉箭头END -->
PS: 这部分的fa-chevron-down为下拉图标部分，可以查看Font Awesome 中文网找到图标名称替换成你喜欢的图标
- 接着修改主题文件中的
style.css文件（记得在WP后台主题设置-CDN-开启本地调用主题js、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 */
}
- 最后打开主题文件
JS目录里的sakura-app.js文件，在底下添加函数
/* 首页下拉箭头 */
function headertop_down() {
var coverOffset = ('#content').offset().top;('html,body').animate({
scrollTop: coverOffset
},
600);
}
全站字体替换
中文字体包挺大的，加载比较慢，不太推荐修改，本站用的是站酷快乐体
先选择一个你喜欢的字体下载他的TTF字体包（超过3M的我不建议你用它），用字客网转下格式（eot、woff、ttf、svg）
然后按如下CSS引用你的字体包，放到主题根目录的 style.css 文件里
@font-face {
font-family: "zhanku";
src: url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.eot"); /* IE9 */
src: url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.woff") format("woff"), /* chrome、firefox */
url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("https://cdn.jsdelivr.net/gh/kokarinn/source@1.2.4/fonts/zhanku2016/zhanku2016.svg#zhanku") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}
最后主题根目录的 style.css 文件，大概第7922行、8305行、8329行、8334行，找不到的 Ctrl + F，在前面加入你的字体，如下
.top-feature-row {
width: 100%;
height: auto;
font-family: 'Noto Serif SC';/*这边用原来字体主要是怕聚焦图错位*/
margin-top: 55px
}
/*移动端字体*/
.chinese-font {
font-family: zhanku, 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
}
/*PC端字体*/
.serif {
font-family: zhanku, 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, 'PT Serif', 'SongTi SC', 'MicroSoft Yahei', Georgia, serif
}
/*移动端字体*/
@media (max-width:860px) {
.serif {
font-family: zhanku, 'Merriweather Sans', Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif
}
}
菜单栏居中显示
- 首先要修改Sakura主题目录的
header.php文件内的结构（从大概93行改起）原来的页面结构(点击可放大)
修改的页面结构(点击可放大)
修改一代码：
<?php if (is_front_page()){ ?><!--判断是否为首页-->
<header class="site-header no-select is-homepage" role="banner">
<?php }else{ ?>
<header class="site-header no-select" role="banner">
<?php } ?>
修改二代码：
找到
Comments | NOTHING