子比主题 – 浮动圆点标题样式美化
提前说一下，这篇文章免费放出去，搬运记得留版权谢谢，某些人搬运我就不多说了，毕竟没有良心。本站只有H1和H2标题样式，因为我喜欢用这两个，有用户跟我说想要h1/h2/h3全部都有的浮动圆点，我这里又加了一个H3的一个橙色标题样式，喜欢的自行部署吧！代码部署
将下面的代码直接丢到：子比主题–>>自定义CSS样式即可！
/*腾飞博客浮动圆点标题美化*/
.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;
}
页:
[1]