侧边栏壁纸
博主头像
饺子 靓1234567

我是你遥不可及的男人

  • 累计撰写 13 篇文章
  • 累计收到 25 条评论
深色模式

子比主题样式美化教程,打造带浮动圆点的标题效果

作者头像
饺子 恒星会员 靓1234567
饺子分享 0 评论 102 阅读

代码部署

.article-content > .wp-posts-content > h2,
3.  
.article-content .wp-posts-content > h1,
4.  
.article-content .wp-posts-content > h3 {
5.  
    z-index: 1;
6.  
}
7.  
8.  
.article-content > .wp-posts-content > h2:hover::before,
9.  
.article-content > .wp-posts-content > h2:hover::after,
10.  
.article-content > .wp-posts-content > h1:hover::before,
11.  
.article-content > .wp-posts-content > h1:hover::after,
12.  
.article-content > .wp-posts-content > h3:hover::before,
13.  
.article-content > .wp-posts-content > h3:hover::after {
14.  
    transform: scale(1.2) !important;
15.  
    transform-origin: center !important;
16.  
    transition: 0.4s;
17.  
}
18.  
19.  
.article-content .wp-posts-content h2::before,
20.  
.article-content .wp-posts-content h1::before,
21.  
.article-content .wp-posts-content h3::before {
22.  
    box-shadow: none !important;
23.  
    opacity: 0.6 !important;
24.  
    border-radius: 50% !important;
25.  
    top: -5px !important;
26.  
    left: -10px !important;
27.  
    z-index: 1;
28.  
}
29.  
30.  
.article-content .wp-posts-content h1::before,
31.  
.article-content .wp-posts-content h1::after {
32.  
    background: linear-gradient(#409eff, transparent) !important;
33.  
}
34.  
35.  
.article-content .wp-posts-content h2::before,
36.  
.article-content .wp-posts-content h2::after {
37.  
    background: linear-gradient(#00ff62, transparent) !important;
38.  
}
39.  
40.  
.article-content .wp-posts-content h3::before,
41.  
.article-content .wp-posts-content h3::after {
42.  
    background: linear-gradient(#ff9800, transparent) !important;
43.  
}
44.  
45.  
.article-content .wp-posts-content h1::before {
46.  
    height: 35px !important;
47.  
    width: 35px !important;
48.  
}
49.  
50.  
.article-content .wp-posts-content h2::before {
51.  
    height: 30px !important;
52.  
    width: 30px !important;
53.  
}
54.  
55.  
.article-content .wp-posts-content h3::before {
56.  
    height: 25px !important;
57.  
    width: 25px !important;
58.  
}
59.  
60.  
.article-content .wp-posts-content h2::after,
61.  
.article-content .wp-posts-content h1::after,
62.  
.article-content .wp-posts-content h3::after {
63.  
    content: "";
64.  
    opacity: 0.6;
65.  
    position: absolute;
66.  
    transition: 0.4s;
67.  
    border-radius: 50%;
68.  
}
69.  
70.  
.article-content .wp-posts-content h2::after {
71.  
    top: -15px;
72.  
    left: 15px;
73.  
    width: 10px;
74.  
    height: 10px;
75.  
}
76.  
77.  
.article-content .wp-posts-content h1::after {
78.  
    top: -13px;
79.  
    left: 25px;
80.  
    width: 13px;
81.  
    height: 13px;
82.  
}
83.  
84.  
.article-content .wp-posts-content h3::after {
85.  
    top: -17px;
86.  
    left: 12px;
87.  
    width: 8px;
88.  
    height: 8px;
89.  
}
弹幕表态
云语宝库官网提示
您已复制成功,宝子请开始你的创作吧!
头像

游客

昵称 代码 图片 快捷回复

请输入代码:

请输入图片链接:

快捷回复:

支持楼主,继续加油!
感谢分享,收藏了!
写得不错,学习了!
路过留个脚印~
文章对我很有帮助,感谢!
期待更多好文!
OωO
回复评论
编辑评论
6会员总数
13文章总数
1913浏览总数
0今日发布
270天稳定运行
  • 波浪
  • 波浪
  • 波浪
  • 波浪
优源库博客网致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!

致力于分享优质实用的互联网资源,内容包括网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!

页面耗时 0.035 秒 | 数据库查询 56 次 | 内存 1.10 MB | 在线人数:1人

关于我们 用户协议
特色功能 小黑屋
用户服务 用户协议
13+

精品文章等您来关注