WordPress极简博客 WordPress极简博客
  • 新鲜事
  • 战疫情
  • UI素材
    • UI素材
    • 电商/节日
    • PPT
      • 节日庆典
      • 工作汇报
      • 商业计划书
    • word
      • 简历竞聘
      • 合同/公文
  • 创客头条
    • 音乐分享
    • 初创文章
    • 极客头条
    • 生活趣事
    • 生活日记
    • 防骗指南
  • 编程教学
    • API日记
    • Linux安全栏目
      • Linux运维安全汇总
      • DDOS攻击防护
      • XSS攻击防护
      • SQL安全防护
    • Python技术栏目
      • Python基础入门
      • Python基础结构
    • WordPress技术栏目
      • WP主题
      • WordPress技术教程
      • RIPRO主题美化
    • WordPress漏洞发布
    • 技术教程汇总
    • 严选源码
  • 专题
  • 基友
  • 隐私
  • 注册
    登录
立即登录
  • 首页
  • 云优化
  • 新疫情
  • 新鲜事
    • 热文
    • 极客
    • 生活
  • 技术篇
    • WP主题
    • 技术教程
    • Python入门
    • Python基础
  • 专题篇
  • 友链君
首页 RIPRO主题美化 RIPRO美化-搜索框动态特效

RIPRO美化-搜索框动态特效

夏柔 4月 18, 2020

下午有位土豪老板找我办点事 官网 https://www.poptnc.com

这位土豪老板让我偷WP美死的搜索框 如图:

RIPRO美化-搜索框动态特效-WordPress极简博客

教程开始:

一、找到 ripro/parts/home-mode/search.php  全部替换

<?php
$mode_search = _cao('mode_search');
$image = $mode_search['bgimg'];
$categories = get_categories( array('hide_empty' => 0) );//获取所有分类
$home_search_mod = _cao('home_search_mod');
?>
<div class="row">
<div class="home-filter--content lazyloaded" data-bg="https://cdn.wpon.cn/wordpress/ripro/wpon/1586227401-e69043d1d75bba6.jpg" alt="RIPRO美化-搜索框动态特效" title="RIPRO美化-搜索框动态特效" style="background-image: url(&quot;https://cdn.wpon.cn/wordpress/ripro/wpon/1586227401-e69043d1d75bba6.jpg&quot;);">
<div class="container">
<h3 class="focusbox-title">找不到资源,我下面给你搜下哦!</h3>
<p class="focusbox-desc">本站所有资源均为高质量资源,各种姿势下载。</p>
<form class="mb-0" method="get" autocomplete="off" action="https://www.wpon.cn">
<div class="form-box search-properties">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-9">
<div class="form-group mb-0">
<input type="text" class="home_search_input" name="s" placeholder="输入关键词搜索...">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<input type="submit" value="搜索" class="btn btn--block">
</div>
</div>
<div class="home-search-results"></div>
</div>
</form>
</div>
</div>
</div>

后台自定义CSS 添加:

/**
* 原创地址: https://www.wpmes.cn
* 教程发布: https://www.wpon.cn/8251.html
* 首页搜索框动态特效
*/
@keyframes imgMove {
0% {
background-position: 0 0
}

to {
background-position: 0 100%
}
}

.home-filter--content {
display: block;
width: 100%;
z-index: 2;
position: relative;
box-shadow: 0 34px 20px -24px rgba(0,36,100,0.06);
padding: 20px;
background: linear-gradient(to right, #34495e, #4e6b88, #34495e);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-animation: imgMove-data-v-0e5ca3f7 70s linear infinite;
animation: imgMove-data-v-0e5ca3f7 70s linear infinite;
height: 400px;
-webkit-animation: imgMove 70s linear infinite;
animation: imgMove 70s linear infinite;
}

本站全网独家发布 - 转载请注明来源

#RIPRO#wordpress#wordpress美化
2
等 2 人赞过
J2dcg1.png
猜你喜欢
  • RiProV2定制导航条
  • 2022年春节虎年引流页面
  • RiPro-v2推广注册送会员小更新
  • RiPro-v2首页广告小工具
  • 给网站添加悬浮动画广告
  • RiPro定制推广注册送会员
  • RiPro-v2定制推广注册赠送会员
  • RiPro定制注册赠送会员
  • RiPro-v2美化头像框
  • WordPress在文章加点隐藏内容
19 2月, 2023
全网首个不限制的ChatGPT免费接口
夏柔
站长
夏山如碧 - 怀柔天下
1737
文章
25
评论
58145K
获赞
版权声明

文章采用创作共用版权 CC BY-NC-ND/2.5/CN 许可协议,与本站观点无关。

如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。
投诉邮箱wpsite@aliyun.com

栏目推荐
Python基础入门33
WordPress技术教程267
前沿技术情报所22
城市创新——新消费11
最近有哪些不可错过的热文23
程序员的养生之道0
节
春
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2025 WordPress极简博客. Designed by 夏柔. 辽公网安备21010502000474号 辽ICP备19017037号-2