子比美化教程——彩色标题样式

效果

列表页面，鼠标滑到标题自动彩色，效果如下：

代码

/*文章标题阅读彩色样式*/
.pink{background-color:#777777 !important;}
@media screen and (min-width: 680px){.joe_div{background: url(http://share.hy.com/local/img/bq.png) right 10px bottom 10px no-repeat;background-size: 12%;}}
.joe_div{color:#989898;word-break: break-all;line-height: 25px;border-radius: 10px;border: 1px solid #777777;padding: 28px 14px 14px 14px;}
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}

@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: -100% 0
  }
}
/*文章标题阅读彩色样式结束*/

10/05/2025 更新

/* WordPress列表页面标题彩色呼吸灯效果 */
/* 适用于 <h2 class="item-heading"><a href="...">标题文本</a></h2> 结构 */

.item-heading a {
    /* 确保链接文本能够显示背景渐变 */
    display: inline-block;
    text-decoration: none; /* 可选：移除下划线 */
    color: inherit;
    
    /* 使用更鲜艳的渐变色作为背景 */
    background-image: linear-gradient(
        -45deg,
        #ff0055, /* 亮粉色 */
        #ff5500, /* 亮橙色 */
        #ffdd00, /* 亮黄色 */
        #00ff88, /* 亮绿色 */
        #0088ff, /* 亮蓝色 */
        #8800ff, /* 亮紫色 */
        #ff00ff  /* 亮紫红色 */
    );
    
    /* 文本填充透明，显示背景渐变色 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* 背景大小设置，为动画提供足够的空间 */
    background-size: 300% 300%;
    
    /* 呼吸灯动画效果 - 6秒循环，平滑过渡 */
    animation: titleBreathing 3s ease-in-out infinite;
    
    /* 增加一些文字厚度，使颜色效果更明显 */
    font-weight: bold;
}

/* 鼠标悬停时增强效果 */
.item-heading a:hover {
    animation-duration: 3s; /* 悬停时加快动画速度 */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* 添加轻微阴影增强立体感 */
}

/* 呼吸灯动画关键帧 */
@keyframes titleBreathing {
    0% {
        opacity: 0.7; /* 稍微提高初始透明度，让标题更清晰 */
        background-position: 0% 50%;
    }
    50% {
        opacity: 1;
        background-position: 100% 50%;
    }
    100% {
        opacity: 0.7;
        background-position: 0% 50%;
    }
}

/* WordPress响应式适配 */
@media screen and (max-width: 768px) {
    .item-heading a {
        font-size: 1.2rem; /* 确保移动设备上标题大小合适 */
    }
}

/* 确保与可能存在的主题样式兼容 */
.item-heading {
    margin-bottom: 15px; /* 保持适当的间距 */
    line-height: 1.4; /* 确保行高合适 */
}