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

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 人赞过
分享
夏柔 站长
文章 709评论 23
赞赏
夏柔
相关文章
  • WordPress去除index.php的方法
  • WordPress美化-抖动图片
  • 关于WordPress 5.5 回复按钮失效问题回复
  • ripro美化 - 纯标题改成三栏
  • WordPress5.5版本正式发布
  • WordPress如何在多站点下判断是否开放用户注册
  • WordPress Email Subscribers & Newsletters 信息泄露漏洞
  • WordPress移除head头部js、css、feed等多余加载项
  • WordPress获取统计文章内图片数量
  • wordpress添加文章统计字数及大概阅读时间
20 6月, 2019
Facebook的增长故事:能不能给我点个赞?
夏柔
站长
夏山如碧 - 怀柔天下
709文章
23评论
58144K获赞
版权声明

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

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

栏目推荐
Python基础入门30
WordPress技术教程265
前沿技术情报所7
城市创新——新消费8
最近有哪些不可错过的热文5
程序员的养生之道0
疫情实况
拜登公布战时抗疫计划
1月 22, 2021
31省区市新增确诊103例 本土94例
1月 22, 2021
科兴疫苗在智利获紧急使用许可
1月 21, 2021
更多
每日快讯
美共和党议员提交弹劾拜登条款
1月 22, 2021
江苏镇江一人核酸检测结果可疑
1月 22, 2021
美媒曝光特朗普离任后第一天动态
1月 22, 2021
男子骂防疫人员:我证件你敢看吗
1月 22, 2021
拜登公布战时抗疫计划
1月 22, 2021
31省区市新增确诊103例 本土94例
1月 22, 2021
巨大火球深夜划过日本上空
1月 21, 2021
科兴疫苗在智利获紧急使用许可
1月 21, 2021
更多
  • 新鲜事
  • 疫情实况
  • UI素材
  • 技术教程
  • 音乐分享
  • 专题
  • 友情
  • 隐私
  • 云优化
Copyright © 2019-2021 WordPress极简博客. Designed by 骚老板. 辽公网安备21010502000474号