文章标题前缀自定义文章标题动态前缀

文章标题前缀自定义文章标题动态前缀-小白兔技术部落
文章标题前缀自定义文章标题动态前缀
此内容为付费阅读,请付费后查看
兔币5
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
安全
可靠
信赖
付费阅读

介绍:

  • 之前在刷博客的时候经常看见别人文章标题前面有一个漂亮的前缀觉得很漂亮,今天我也给大家分享一个

效果显示

图片[1]-文章标题前缀自定义文章标题动态前缀-小白兔技术部落

废话不多说,直接开始教程,为了防止白嫖怪和网站需要运行本教程酌情收取一点费用,望理解

代码部署教程:

PHP代码放置于funtions.phpfunc.php

CSS:自定义CSS样式文件或者你引到php文件

/*文章前缀申明开始-小白兔技术部落http://www.amitu.cn*/
@keyframes sweepTitle {
0% {
left: -100%
}
100% {
    left: 100%
}
}
.ove_prefix, .ove_prefix1{
color: #fff;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
border-radius: 5px;
padding: 5px 4px;
margin-right: 3px;
height: 19px;
font-size: 12px;
clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.ove_prefix, .ove_prefix1: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);
}
.ove_prefix{ background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%); }
.ove_prefix1{ background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%); }
/*文章前缀申明结束-*/
温馨提示:本文最后更新于2024-09-11 00:34:12,某些文章具有时效性,若有错误或已失效,请在下方留言或联系兔子警长
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享