子比主题 – 文章标题样式美化

0436

这个写了H1-H3，右边加了动态的效果，我觉得还是不错的，喜欢的自行部署！

图片[1]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第十一款标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before {
    content: none !important;
    display: none !important;
}
.article-content h1,
.article-content h2,
.article-content h3 {
    display: block;         
    width: fit-content;      
    margin: 20px 0;
    padding: 12px 24px 12px 28px; 
    font-weight: 800;
    font-size: 1.1em;
    color: #fff;
    border-radius: 12px;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    overflow: hidden;
    cursor: default;
    transition: transform 0.3s, box-shadow 0.3s;
}

.article-content h1:hover,
.article-content h2:hover,
.article-content h3:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.article-content h1 {
    background: linear-gradient(90deg, #ff6b6b, #f44336);
}
.article-content h2 {
    background: linear-gradient(90deg, #4dd0e1, #00bcd4);
}
.article-content h3 {
    background: linear-gradient(90deg, #81c784, #4caf50);
}

.article-content h1::before,
.article-content h2::before,
.article-content h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    border-radius: 12px 0 0 12px;
}

.article-content h1::before { background: #f44336; }
.article-content h2::before { background: #00bcd4; }
.article-content h3::before { background: #4caf50; }

.article-content h1::after,
.article-content h2::after,
.article-content h3::after {
    content: '✨';
    position: absolute;
    top: -5px;
    right: -10px;
    font-size: 1em;
    animation: twinkle 2s infinite alternate;
    opacity: 0.6;
}

@keyframes twinkle {
    0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
    100% { opacity: 0.3; transform: scale(0.8) rotate(-15deg); }
}

上面的font-size：1.8em显示异常大，我已经改为1.1em了，就是1.1字体的意思。

第二款就是腾飞自己做的浮动圆点样式，不过也是借鉴别人的站，还是不错的，这款写了H1-H3标题样式，样式自己看图片吧！图片[2]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第二款标题样式美化 */
.article-content > .wp-posts-content > h2,
.article-content .wp-posts-content > h1,
.article-content .wp-posts-content > h3 {
    z-index: 1;
}

.article-content > .wp-posts-content > h2:hover::before,
.article-content > .wp-posts-content > h2:hover::after,
.article-content > .wp-posts-content > h1:hover::before,
.article-content > .wp-posts-content > h1:hover::after,
.article-content > .wp-posts-content > h3:hover::before,
.article-content > .wp-posts-content > h3:hover::after {
    transform: scale(1.2) !important;
    transform-origin: center !important;
    transition: 0.4s;
}

.article-content .wp-posts-content h2::before,
.article-content .wp-posts-content h1::before,
.article-content .wp-posts-content h3::before {
    box-shadow: none !important;
    opacity: 0.6 !important;
    border-radius: 50% !important;
    top: -5px !important;
    left: -10px !important;
    z-index: 1;
}

.article-content .wp-posts-content h1::before,
.article-content .wp-posts-content h1::after {
    background: linear-gradient(#409eff, transparent) !important;
}

.article-content .wp-posts-content h2::before,
.article-content .wp-posts-content h2::after {
    background: linear-gradient(#00ff62, transparent) !important;
}

.article-content .wp-posts-content h3::before,
.article-content .wp-posts-content h3::after {
    background: linear-gradient(#ff9800, transparent) !important;
}

.article-content .wp-posts-content h1::before {
    height: 35px !important;
    width: 35px !important;
}

.article-content .wp-posts-content h2::before {
    height: 30px !important;
    width: 30px !important;
}

.article-content .wp-posts-content h3::before {
    height: 25px !important;
    width: 25px !important;
}

.article-content .wp-posts-content h2::after,
.article-content .wp-posts-content h1::after,
.article-content .wp-posts-content h3::after {
    content: "";
    opacity: 0.6;
    position: absolute;
    transition: 0.4s;
    border-radius: 50%;
}

.article-content .wp-posts-content h2::after {
    top: -15px;
    left: 15px;
    width: 10px;
    height: 10px;
}

.article-content .wp-posts-content h1::after {
    top: -13px;
    left: 25px;
    width: 13px;
    height: 13px;
}

.article-content .wp-posts-content h3::after {
    top: -17px;
    left: 12px;
    width: 8px;
    height: 8px;
}

第三款标题样式腾飞是借鉴的一个游戏站的标题样式，通过图片截取来做的H1-H2的样式，还是不错的，目前用的站还是挺多的！图片[3]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第三款标题样式美化 */
.wp-posts-content>h1.wp-block-heading{
    position: relative;
    padding: 10px 12px;
    display: block;
    font-size: 20px;
    color: #6297FF;
    font-weight: bold;
    line-height: 26px;
    margin-bottom: 20px;
    background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
        background-size: 1000px 1000px;
    background-position: -5px -902px;
    
}
.wp-posts-content>h2.wp-block-heading{
    padding: 0px 0px 0px 19px !important;
    position: relative;
    padding: 10px 12px;
    display: block;
    font-size: 20px;
    color: #6297FF;
    font-weight: bold;
    line-height: 32px;
    margin-bottom: 20px;
    background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01Ga7VH11QbIjzNumln_!!2210123621994.png) no-repeat;
    background-size: 1000px 999px;
    background-position: -3px -837px;
}
.wp-posts-content>h3.wp-block-heading{
    padding: 0px 0px 0px 45px!important;
    background: url(https://tfbk.jzpix.cn/wp-content/themes/ZibTF/pic/h3.svg) 10px center no-repeat;
    background-size: 30px 20px;
}
.wp-posts-content>h1.wp-block-heading:before{
    display:none;
}
.wp-posts-content>h2.wp-block-heading:before{
    display:none;
}
.wp-posts-content>h3.wp-block-heading:before{
    display:none;
}

第四款的话我建议部署一下，因为这个是单独美化了H5-H6，适合做笔记站，而且H6还有动态的效果，还是不错的一款标题样式！

/* 腾飞博客第四款标题样式美化 */
.article-content h5 {
    padding: 5px 25px;
    margin: 12px 0px;
    position: relative;
    font-size: 18px;
    letter-spacing: 2px;
    color: #f73434;
}
.article-content h5::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url(https://www.tfbkw.com/wp-content/themes/ZibTF/img/hh5.svg);
    background-size: 100% 100%;
}
.article-content h6:before {
    border-bottom: 2px solid #4dd0e1;
    width: 100%;
    content: "";
    display: block;
    height: 27px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: -2px;
    margin: auto;
    background-size: 28px 28px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    animation: h6AnimationBefore 2s infinite alternate
}
.article-content h6 {
    margin: 25px 0;
    font-size: 16px;
    position: relative;
    padding: 4px 25px;
    width: max-content;
    color: #4dd0e1
}
.article-content h6:after {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    position: absolute;
    border: 2px solid #4dd0e1;
    border-radius: 50%;
    right: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-size: 28px 28px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII=);
    animation: h6AnimationAfter 2s infinite alternate
}
h6 {
    display: block;
    font-size: 1.17em;
    margin-block-start:1em;
    margin-block-end:1em;
    margin-inline-start:0px;
    margin-inline-end:0px;
    font-weight: bold
}
@keyframes h6AnimationBefore {
    0% {
        width: 28px
    }
    25% {
        width: 100%
    }
    50% {
        width: 100%
    }
    to {
        width: 100%
    }
}
@keyframes h6AnimationAfter {
    0% {
        transform: rotate(0)
    }
    10% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(-1turn)
    }
    to {
        transform: rotate(-1turn)
    }
}

这个第五款腾飞是借鉴了vue3的样式来写的，只写了H1-H3，这款很简约，也是不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

图片[4]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第五款标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before {
    content: none !important;
    display: none !important;
}

.article-content h1 {
    margin: 20px 0;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 24px;
    color: #222;
    border-left: 4px solid #2196f3;
    background: #e3f2fd;
    border-radius: 4px;
    width: fit-content;
}

.article-content h2 {
    margin: 20px 0;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 22px;
    color: #222;
    border-left: 4px solid #f44336; 
    background: #fdecea; 
    border-radius: 4px;
    width: fit-content;
}

.article-content h3 {
    margin: 20px 0;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 20px;
    color: #222;
    border-left: 4px solid #4caf50;
    background: #e8f5e9; 
    border-radius: 4px;
    width: fit-content;
}

第六款是借鉴一个做笔记博客的网站，只写了H1-H3的，我觉得还是一个不错的样式，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

图片[5]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第六款标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before {
    content: none !important;
    display: none !important;
}
.article-content h1,
.article-content h2,
.article-content h3 {
    margin: 20px 0;
    padding: 6px 12px;
    font-weight: bold;
    position: relative;
    display: block;   
}

.article-content h1 {
    font-size: 24px;
    color: #2e7d32;
    background: linear-gradient(to right, #c8e6c9 40%, transparent 100%);
}
.article-content h1::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, #4caf50, transparent);
    margin-top: 4px;
}
.article-content h2 {
    font-size: 22px;
    color: #1565c0;
    background: linear-gradient(to right, #bbdefb 40%, transparent 100%);
}
.article-content h2::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, #2196f3, transparent);
    margin-top: 4px;
}
.article-content h3 {
    font-size: 20px;
    color: #c62828;
    background: linear-gradient(to right, #ffcdd2 40%, transparent 100%);
}
.article-content h3::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, #f44336, transparent);
    margin-top: 4px;
}

第七款这一款是腾飞博客自己随便写的一款，还是不错的，很简约，写了H1-H3标题，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这就不多说！

图片[6]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第七款标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before {
    content: none !important;
    display: none !important;
}
.article-content h1,
.article-content h2,
.article-content h3 {
    margin: 20px 0;
    padding: 6px 12px;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    display: block;
    border: 2px solid transparent;
    border-left-width: 3px; 
    border-radius: 3px 0 0 3px;
}

.article-content h1 {
    border-image: linear-gradient(to right, #f44336, transparent) 1;
}

.article-content h2 {
    border-image: linear-gradient(to right, #00bcd4, transparent) 1;
}

.article-content h3 {
    border-image: linear-gradient(to right, #4caf50, transparent) 1;
}

这一款也是借鉴一个博客网站的样式来写，这款是写H1-H5的样式，我觉得非常简约，不喜欢颜色可以自己自定义颜色，颜色代码应该都会改吧，这款写了两个样式，自己看一下吧！

图片[7]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第八款第二样式标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before,
.article-content h4::before,
.article-content h5::before {
    content: none !important;
    display: none !important;
}

.article-content h1 {
  padding: 5px 20px;
  border-left: 10px solid #ed5151;
  background-color: rgba(237, 81, 81, 0.05);
  font-size: 19px;
  line-height: 36px;
  color: #333;
  font-weight: bold;
  margin: 15px 0 10px;
  display: block;
  border-radius: 0 4px 4px 0;
  transition: all 0.3s ease;
}

.article-content h1:hover {
  background-color: rgba(237, 81, 81, 0.08);
}

.article-content h2 {
  padding: 5px 20px;
  border-left: 10px solid #BF51ED;
  background-color: rgba(191, 81, 237, 0.05);
  font-size: 18px;
  line-height: 34px;
  color: #333;
  font-weight: bold;
  margin: 12px 0 8px;
  display: block;
  border-radius: 0 4px 4px 0;
  transition: all 0.3s ease;
}

.article-content h2:hover {
  background-color: rgba(191, 81, 237, 0.08);
}

.article-content h3 {
  padding: 5px 20px;
  border-left: 10px solid #6495ed;
  background-color: rgba(100, 149, 237, 0.05);
  font-size: 17px;
  line-height: 32px;
  color: #333;
  font-weight: bold;
  margin: 10px 0 6px;
  display: block;
  border-radius: 0 4px 4px 0;
  transition: all 0.3s ease;
}

.article-content h3:hover {
  background-color: rgba(100, 149, 237, 0.08);
}

.article-content h4 {
  padding: 3px 20px;
  border-left: 10px solid #e2aa2b;
  background-color: rgba(226, 170, 43, 0.05);
  font-size: 16px;
  line-height: 30px;
  color: #333;
  font-weight: bold;
  margin: 8px 0 5px;
  display: block;
  border-radius: 0 4px 4px 0;
  transition: all 0.3s ease;
}

.article-content h4:hover {
  background-color: rgba(226, 170, 43, 0.08);
}

.article-content h5 {
  padding: 3px 20px;
  border-left: 10px solid #64c1c1;
  background-color: rgba(100, 193, 193, 0.05);
  font-size: 15px;
  line-height: 28px;
  color: #333;
  font-weight: bold;
  margin: 6px 0 4px;
  display: block;
  border-radius: 0 4px 4px 0;
  transition: all 0.3s ease;
}

.article-content h5:hover {
  background-color: rgba(100, 193, 193, 0.08);
}

第十款纯背景没有多说的，喜欢什么颜色自己改颜色，写到了H1-H5标题样式

图片[8]-子比主题 – 文章标题样式美化-春眠不觉晓

/* 腾飞博客第十款标题样式美化 */
.article-content h1::before,
.article-content h2::before,
.article-content h3::before,
.article-content h4::before,
.article-content h5::before {
    content: none !important;
    display: none !important;
}

.article-content h1 {
  padding: 8px 20px;
  border-left: none;
  background-color: #ed5151;
  font-size: 19px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  margin: 15px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: fit-content;
}

.article-content h2 {
  padding: 8px 20px;
  border-left: none;
  background-color: #BF51ED;
  font-size: 18px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  margin: 12px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: fit-content;
}

.article-content h3 {
  padding: 8px 20px;
  border-left: none;
  background-color: #6495ed;
  font-size: 17px;
  line-height: 27px;
  color: white;
  font-weight: bold;
  margin: 10px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: fit-content;
}

.article-content h4 {
  padding: 8px 20px;
  border-left: none;
  background-color: #e2aa2b;
  font-size: 16px;
  line-height: 24px;
  color: white;
  font-weight: bold;
  margin: 8px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: fit-content;
}

.article-content h5 {
  padding: 8px 20px;
  border-left: none;
  background-color: #64c1c1;
  font-size: 15px;
  line-height: 21px;
  color: white;
  font-weight: bold;
  margin: 6px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: fit-content;
}

转自：腾飞博客，作为美化备份。

© 版权声明
1、本网站名称：春眠不觉晓

2、本站永久网址：https://cmbjx.com

3、本站文章内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系QQ775182000。

4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

6、本站资源大多存储在云盘，如发现链接失效,请告诉我们，我们会第一时间更新。

THE END
🎁宝藏
点赞6 分享
手可摘星辰的头像-春眠不觉晓超级至尊
月光视界内置本地源-春眠不觉晓
月光视界内置本地源
月光视界内置本地源
25天前 573
影视至臻TV版·极致（更新两款图标）-春眠不觉晓
影视至臻TV版·极致（更新两款图标）
影视至臻TV版·极致（更新两款图标）
18天前 530
FM影视双端最新版-春眠不觉晓
FM影视双端最新版
FM影视双端最新版
1个月前 468
影视至臻·极致手机版-春眠不觉晓
影视至臻·极致手机版
影视至臻·极致手机版
18天前 444
春晓影视ᵐ·内置多仓·手机版-春眠不觉晓
春晓影视ᵐ·内置多仓·手机版
春晓影视ᵐ·内置多仓·手机版
1个月前 375
TV影视·影视界-春眠不觉晓
TV影视·影视界
TV影视·影视界
29天前 294
相关推荐
电视WebView组件低版本升级教程-春眠不觉晓
电视WebView组件低版本升级教程
电视WebView组件低版本升级教程
47天前 209
公告：十一开放注册·双节快乐！！！-春眠不觉晓
公告：十一开放注册·双节快乐！！！
公告：十一开放注册·双节快乐！！！
1个月前 182
苹果伪装影视合集（持续更新）-春眠不觉晓
苹果伪装影视合集（持续更新）
苹果伪装影视合集（持续更新）
50天前 127
一万年太久，只争朝夕-春眠不觉晓
一万年太久，只争朝夕
一万年太久，只争朝夕
12天前 123
白色波浪页脚底部美化（已失效）-春眠不觉晓
白色波浪页脚底部美化（已失效）
白色波浪页脚底部美化（已失效）
9天前 111
美化笔记·为网站添加一个灵动岛样式美化代码-春眠不觉晓
美化笔记·为网站添加一个灵动岛样式美化代码
美化笔记·为网站添加一个灵动岛样式美化代码
14天前 110
评论 抢沙发

请登录后发表评论

    暂无评论内容