docs\.vuepress\config\themeConfig.ts文件：ts
import htmlModules from './htmlModules' // 自定义插入的html块
// 此处省略其他代码....
htmlModules, // 插入hmtl模块
docs\.vuepress\config\htmlModules.ts文件：ts
const htmlModule: VdoingThemeConfig["htmlModules"] = {
//此处省略公众号模块代码...
pageB: `<div class="donation">
<button>打赏</button>
<div class="main">
<div class="pic">
<img src="/img/Donation/weixin.jpg" alt="微信">
<img src="/img/Donation/zhifubao.jpg" alt="支付宝">
</div>
</div>
</div>`,
};
每篇文章尾部都会出现这个赞赏功能哦。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>边框按钮</button>
</body>
</html>css
<style>
body {
background-color: #000;
}
button {
width: 100px;
height: 50px;
background-color: #000000;
border: none;
color: white;
border-radius: 10px;
cursor: pointer;
/* outline: 4px solid rgb(255, 0, 0); */
/* 设置相对位置 */
position: relative;
z-index: 1;
overflow: hidden;
}
/* 设置伪元素 */
button::before {
content: "";
/* 设置内容为空 */
position: absolute;
/* 设置定位为绝对定位 */
width: 200%;
height: 200%;
background: linear-gradient(
114.2deg,
rgba(184, 215, 21, 1) -15.3%,
rgba(148, 187, 233, 1) 14.5%,
rgba(21, 215, 182, 1) 38.7%,
rgba(129, 189, 240, 1) 58.8%,
rgba(219, 108, 205, 1) 77.3%,
rgba(240, 129, 129, 1) 88.5%
);
z-index: -2;
left: 50%;
top: 50%;
transform-origin: left top;
animation: rotation 4s linear infinite;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
/* 继续设置一个伪元素 */
button::after {
content: "";
position: absolute;
inset: 4px;
/* 设置边距 */
background: #000000;
z-index: -1;
border-radius: inherit;
}
</style>提示
路径：docs\.vuepress\styles\index.styl
css
// 文章底部打赏按钮
.donation
position relative
text-align: center
margin-top: 10px
button
width 5rem
height 2.5rem
border: 0
border-radius .5rem
color: #fff
background-color #ffffff00
font-weight: bold
opacity 0.9
transition: all .5s
cursor: pointer
position: relative;
z-index: 1;
overflow: hidden;
&:hover,&:focus
opacity 1
transform: scale(1.05)
~.main
.pic
visibility: visible
opacity 1
transform: translateY(-1.5rem)
.main
position absolute
bottom 3rem
left: 0
right: 0
pointer-events: none
.pic
position relative
visibility hidden
display: inline-block
padding:10px 12px
background-color:#fff6
backdrop-filter: blur(6px);
box-shadow: 0 0 10px 0 #3336
border-radius: 1rem
opacity 0
transition: all .5s
pointer-events: all
z-index 10
&:hover
visibility visible
opacity 1
transform: translateY(-1.5rem)
&::before
content: ''
position absolute
bottom -@padding[0]
left: 50%
right: 50%
filter: drop-shadow(0px 4px 4px #3336);
transform: translateX(-50%)
border-width: (-@bottom) (-@bottom) 0;
border-style: solid;
border-color: rgba(#fff,.8) transparent transparent;
&::after
content: ''
display block
position absolute
width 100%
height 2.5rem
img
width 10rem
max-width 40vw
.donation button::before{
content: ''
position: absolute
width: 200%;
height: 200%;
background: linear-gradient(
114.2deg,
rgba(184, 215, 21, 1) -15.3%,
rgba(148, 187, 233, 1) 14.5%,
rgba(21, 215, 182, 1) 38.7%,
rgba(129, 189, 240, 1) 58.8%,
rgba(219, 108, 205, 1) 77.3%,
rgba(240, 129, 129, 1) 88.5%
);
z-index: -2;
left: 50%;
top: 50%;
transform-origin: left top;
animation: rotation 4s linear infinite;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
.donation button::after {
content: "";
position: absolute;
inset: 4px;
/* 设置边距 */
background:#FFA500;
z-index: -1;
border-radius: inherit;
}此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。