子比主题美化-浮动圆点标题样式

图片[1]- 子比主题美化-浮动圆点标题样式
/*浮动圆点标题美化*/
.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;
}
/*浮动圆点标题美化结束*/

教程

图片[2]- 子比主题美化-浮动圆点标题样式
© 版权声明
评论 抢沙发

请登录后发表评论

    暂无评论内容