子比主题 – 侧边介绍跳转样式代码

飞流 · 发表于 2025-10-10 17:17:56

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

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

×

这是一款腾飞博客仿一个站的侧边样式，看到了还是不错的，拿过来改了改，不只wordpress可以用，其他网站都可以用，跳转链接带有悬停动画效果，喜欢的自行部署吧！

代码部署

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

<style>
.block-introduction{width:100%;max-width:900px;border-radius:16px;overflow:hidden;position:relative;z-index:1;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}.block-introduction::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);z-index:-1;border:1px solid rgba(255,255,255,0.18);box-shadow:0 8px 32px rgba(31,38,135,0.1)}.wp-block-meteor-introduction-block{background:linear-gradient(135deg,#60a5fa,#a78bfa);color:#fff;padding:25px 35px;position:relative;overflow:hidden}.wp-block-meteor-introduction-block::before{content:"";position:absolute;top:-20%;right:-10%;width:30%;height:60%;background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 70%);transform:rotate(30deg)}.wp-block-meteor-introduction-block p:first-child{font-size:15px;line-height:1.6;margin-bottom:15px;position:relative;font-weight:300;letter-spacing:0.3px}.wp-block-separator{border:none;height:1px;margin:15px 0;position:relative}.wp-block-separator::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0) 100%)}.wp-block-meteor-introduction-block p:last-child{font-size:14px;text-align:center;position:relative;font-weight:500;letter-spacing:0.5px;margin-top:5px}.wp-block-meteor-introduction-block p:last-child a{color:#fff;text-decoration:none;position:relative;padding:0 2px}.wp-block-meteor-introduction-block p:last-child a::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:rgba(255,255,255,0.7);transform:scaleX(0);transform-origin:right;transition:transform 0.3s ease}.wp-block-meteor-introduction-block p:last-child a:hover::after{transform:scaleX(1);transform-origin:left}@media (max-width:768px){.wp-block-meteor-introduction-block{padding:20px 25px}.wp-block-meteor-introduction-block p:first-child{font-size:14px}}
</style>
<div class="block-introduction">
<div class="wp-block-meteor-introduction-block">
<p>致力于分享优质实用的互联网资源，内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程，致力打造一个IT博客！</p>
<hr class="wp-block-separator has-alpha-channel-opacity">
<p>腾飞博客 —— <a href="https://www.tfbkw.com" target="_blank" rel="noopener">www.tfbkw.com</a></p>
</div>
</div>

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对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

[代码技巧] 子比主题 – 侧边介绍跳转样式代码

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

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn