- 首先找到Sakura主题文件包下的
layouts
中的 imgbox.php
文件,在最底下添加如下代码
| echo 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
文件(记得在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); |
| -webkit-transform: scale(1.5,1); |
| transform: scale(1.5,1); |
| } |
| |
- 最后打开主题文件
JS
目录里的 sakura-app.js
文件,在底下添加函数
| |
| function headertop_down() { |
| var coverOffset = $('#content').offset().top; |
| $('html,body').animate({ |
| scrollTop: coverOffset |
| }, |
| 600); |
| } |
| |
效果预览
The best things come when you least expect them to.
Comments | NOTHING