使用 CSS3 Animation 复现
直接扒 JS 代码固然省时省力……【省嘛?好像没有吧,当初扒的时候眼睛都快瞎了】,但是 JS 似乎不是每次都起作用……
然后我就自己用 CSS3 Animation 重写这个动画。CSS 如下:
#banner_wave_1 {
width: auto;
height: 65px;
background: url(https://oss.amogu.cn/blog/sakura/images/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://oss.amogu.cn/blog/sakura/images/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;
}
}
波浪图片请自己保存不要直接引用……,一分CDN流量一分钱啊TAT
两个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插在这。-->
<figure id="centerbg" class="centerbg">
<?php if ( !akina_option('focus_infos') ){ ?>
<div class="focusinfo">
<?php if (akina_option('focus_logo')):?>
……
Comments | 14 条评论
麻了,搞这个动画都能搞几天....我一个不会前端的运维在玩些什么玩意
博主实在没弄明白两个DIY是什么
搞好了!多谢大佬嘿嘿
大佬,我的怎么不显示
@xiadengma CSS代码要么放到后台主题设置-自定义CSS样式里
要么就关闭CDN中的本地调用主题 js、css 文件选项,放在主题目录下的Style.css
imgbox.php文件记得修改
@Kinoko 我放在自定义css里不显示
@xiadengma 那需你再看看了,记得吧 //注释删了
该评论为私密评论
@揽一身可爱 没用CDN的话就不用管,用了CDN的话去你CDN服务设置那边都有的。邮箱那个你只要配置了WP的发件邮箱就会自动发送的,可以用这个插件:Easy WP SMTP 或者 WPJAM Basic(全站一键优化插件,扩展管理里有发信设置,我用的这个)。
这个CSS放到哪里呀博主
@揽一身可爱 后台外观-主题设置-自定义CSS样式
或
直接加到主题包的style.css文件底下,但要开主题设置中的CDN一栏【本地调用主题 js、css 文件(sakura-app.js、style.css)】选项
改完记得刷新缓存
大佬我用了一下显示不成功哇
@Hrlni-hrlni.cn 我看了你的博客已经显示成功了哦
@Kinoko 刚刚搞好