AI DIGEST
AI 摘要
LIVE

该文章介绍了一种通过 CSS 代码实现的自定义文章前缀样式。 前缀采用斜切多边形设计,带有圆角和渐变扫光动画效果。 通过 clip-path 和伪元素实现视觉上的独特边框与动态光效。 动画使用关键帧控制,使白色光条从左至右持续扫过前缀区域。

子比主题-新版自定义文章前缀功能(代码版)

图片[1]-子比主题-新版自定义文章前缀功能(代码版)-随风去-396资源

CSS

.DearLicy_prefix{
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 4px;
    margin-right: 3px;
    height: 19px;
    font-size: 12px;
    top: -3px;
    clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.DearLicy_prefix:after, .DearLicy_prefix:after {
    position: absolute;
    content: " ";
    display: block;
    left: -100%;
    top: -5px;
    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%
    }
}
© 版权声明
THE END
喜欢就支持一下吧
点赞13赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容