wordpress 侧边栏的卡片

<div style="display: flex; flex-direction: column; gap: 15px; padding: 15px; background: #f8f9fa; border-radius: 12px;">
<style>
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
}
}

.card-animation {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
}

.card-container {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
background: white;
}

.card-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-image {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 10px 10px 0 0; /* 图片顶部圆角 */
}

.card-content {
padding: 16px;
}

.card-title {
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
color: #2d3748;
}

.card-description {
font-size: 14px;
color: #718096;
margin: 0 0 16px 0;
line-height: 1.5;
}

.card-button {
display: inline-block;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
text-align: center;
}

/* 不同颜色的按钮样式 */
.btn-blue {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}

.btn-green {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
}

.btn-purple {
background: linear-gradient(135deg, #834d9b 0%, #d04ed6 100%);
color: white;
}

.card-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.card-button:active {
transform: translateY(0);
}
</style>

<!-- 卡片1 -->
<div class="card-container card-animation" style="animation-delay: 0.1s;" onclick="window.open('https://flowus.cn/xpp9/share/53ce0a8d-919a-4a2f-9b5d-9bdaaca319de?code=FUAWSB', '_blank')">
<img src="http://image.jiyun.net/blogtest/2025/09/20250908103521748.gif" alt="追番" class="card-image">
<div class="card-content">
<h3 class="card-title">我爱追番</h3>
<p class="card-description">一个40岁的大叔的追番之路，主要是修真题材</p>
<a href="https://flowus.cn/xpp9/share/53ce0a8d-919a-4a2f-9b5d-9bdaaca319de?code=FUAWSB" target="_blank" class="card-button btn-blue">快来追番</a>
</div>
</div>

<!-- 卡片2 -->
<div class="card-container card-animation" style="animation-delay: 0.2s;" onclick="window.open('https://example.com/customs', '_blank')">
<img src="http://image.jiyun.net/blogtest/2025/09/20250908104412908.webp" alt="听书" class="card-image">
<div class="card-content">
<h3 class="card-title">我爱听书</h3>
<p class="card-description">开车的时候，入睡前，运动散步的时候听书。</p>
<a href="https://www.ximalaya.com/zhubo/41867091" target="_blank" class="card-button btn-green">来听书吧</a>
</div>
</div>

<!-- 卡片3 -->
<div class="card-container card-animation" style="animation-delay: 0.3s;" onclick="window.open('https://www.flowus.cn/xpp9/share/d06e1485-2fea-4e55-aa5e-0cb8d81efee6?code=FUAWSB', '_blank')">
<img src="http://image.jiyun.net/blogtest/2025/09/20250908104754235.png" alt="读书" class="card-image">
<div class="card-content">
<h3 class="card-title">在线读书</h3>
<p class="card-description">电子书也好，纸质书也罢，书费解不能读也。</p>
<a href="https://www.flowus.cn/xpp9/share/d06e1485-2fea-4e55-aa5e-0cb8d81efee6?code=FUAWSB" class="card-button btn-purple">坚持读书</a>
</div>
</div>
</div>