子比顶部多功能组件添加动态波浪美化 – 子比主题美化教程

效果图:(动图)

子比顶部多功能组件添加动态波浪美化 – 子比主题美化教程-蛙言网

这是一个子比顶部多功能组件添加动态波浪美化教程,支持昼夜模式,使用也很简单,有需要的可以部署看看。

部署教程:

  • 部署一共分为两步,大家跟着教程来即可

添加路径:网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式

.parallax{fill:var(--body-bg-color)}.parallax > use{animation:move-forever 30s cubic-bezier(0.55,0.5,0.45,0.5) infinite}.parallax > use:nth-child(1){animation-delay:-2s;animation-duration:7s;opacity:0.5}.parallax > use:nth-child(2){animation-delay:-3s;animation-duration:10s;opacity:0.6}.parallax > use:nth-child(3){animation-delay:-4s;animation-duration:13s;opacity:0.7}.parallax > use:nth-child(4){animation-delay:-5s;animation-duration:20s;opacity:1}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}

JS代码

JS文件下载后上传

2:将下面代码放入网站后台->Zibll主题设置->全局&功能->自定义代码->自定义底部HTML代码

<script src="/wp-content/themes/zibll/js/dh_wave.js"></script>

如果您的JS文件是上传到其他位置的,请修改上面的路径

© 版权声明
THE END
喜欢就支持一下吧
点赞14赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容