子比主题 – 侧边百度一下卡片样式

飞流 · 发表于昨天 15:41

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

一款子比主题侧边协助SEO优化的小工具，但UI设计实在太过陈旧，视觉体验不够出色。今天给大家带来一款全新设计的小卡片，清新美观，这一个小工具没打算写小工具，因为功能太少，直接用代码实现即可！来源：星雨博客

代码部署

将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML即可！

<style>
.input__container {
position: relative;
padding: 10px 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: 22px;
max-width: 300px;
transition: transform 400ms;
transform-style: preserve-3d;
perspective: 500px;
}
.shadow__input {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: -1;
filter: blur(40px);
border-radius: 20px;
background: radial-gradient(circle at 25% 25%, #ff8fa0, transparent 40%),
radial-gradient(circle at 75% 25%, #8ed6ff, transparent 40%),
radial-gradient(circle at 25% 75%, #d08cff, transparent 40%),
radial-gradient(circle at 75% 75%, #93ffcf, transparent 40%);
background-size: 300% 300%;
animation: gradientMove 8s infinite ease-in-out;
}
@keyframes gradientMove {
0% {
background-position: 0% 0%;
}
25% {
background-position: 50% 25%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 25% 75%;
}
100% {
background-position: 0% 100%;
}
}
.input__search {
flex-grow: 1;
border-radius: 20px;
outline: none;
border: none;
padding: 8px;
padding-left: 20px;
position: relative;
}
.input__button__shadow {
cursor: pointer;
border: none;
background: none;
transition: transform 400ms, background 400ms;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
padding: 5px;
}
.input__button__shadow:hover {
background: rgba(255, 255, 255, 0.2);
}
.wniui-seach {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
background-color: var(--main-bg-color);
border-radius: 10px;
}
.wniui-baidu {
position: absolute;
top: 0;
left: 0;
}
.wniui_prefix {
overflow: hidden;
display: inline-flex;
align-items: center;
padding: 5px 5px;
margin-right: 2px;
height: 19px;
vertical-align: middle;
font-size: 12px;
border-radius: .6em 2px;
line-height: 1.4rem
}
.wniui_prefix:after {
position: absolute;
content: " ";
display: block;
width: 15px;
height: 145%;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
animation: sweepTitle 3s ease-in-out infinite;
transform: rotate(28deg)
}
@keyframes sweepTitle {
0% {
left: -100%
}
100% {
left: 100%
}
}
</style>
<div class="wniui-seach">
<span class="wniui_prefix wniui-baidu jb-pink">百度一下</span>
<div class="input__container">
<div class="shadow__input"></div>
<input type="text" name="text" class="input__search" placeholder="腾飞博客">
<button class="input__button__shadow">
<img src="https://www.wniui.com/wp-content/uploads/2024/12/c9a03fb2b220241229141747.svg" alt="搜索">
</button>
</div>
</div>
<script>
document.querySelector('.input__button__shadow').addEventListener('click', function () {
const query = document.querySelector('.input__search').value.trim() || '腾飞博客';
const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(query)}`;
window.open(searchUrl, '_blank');
});
</script>

复制代码

	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22

[代码技巧] 子比主题 – 侧边百度一下卡片样式

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

相关帖子

飞流广播+ 发布

连签LV.1

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn