代码如下
/* ----------方法1如果希望取消挖空效果,请删除这段代码 Start---------------- */
/* 修改高亮为挖空效果,但是预览模式关闭(毕竟需要导出) */
.protyle-wysiwyg mark{
color: transparent;
transition: color 0.1s ease-in-out;
}
.protyle-wysiwyg [data-node-id] [spellcheck="false"] mark:hover{
color: var(--b3-protyle-inline-mark-color);
transition: color 0.2s ease-in-out;
}
/* -------------如果希望取消挖空效果,请删除这段代码 END----------------------------------- */
/* ------------------ 方法2自定义属性 ----------------------- */
.protyle-wysiwyg [data-node-id][custom-function="挖空"]{
border: 2px dashed rgba(92, 135, 138, 0.322);
background-color: rgba(92, 135, 138, 0.322);
background-image: -webkit-gradient(linear,
0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent),
color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent),
to(transparent));
background-size: 10px 10px;
border-radius: 0.5em;
transform: perspective(1000px);
transform-style: preserve-3d;
transform: rotateX(180deg);
}
.protyle-wysiwyg [data-node-id][custom-function="挖空"] * {
opacity: 0;
}
.protyle-wysiwyg [data-node-id][custom-function="挖空"]:focus-within {
transform: rotateX(0deg);
color: var(--b3-theme-on-background);
border-color: var(--b3-theme-on-background);
background-color: transparent;
background-image: none;
}
.protyle-wysiwyg [data-node-id][custom-function="挖空"]:focus-within * {
opacity: 1;
}
.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-function="挖空"]:hover{
animation: rotateHide 0.7s ease forwards;
}
.protyle-wysiwyg .protyle-wysiwyg__embed [data-node-id][custom-function="挖空"]:hover * {
opacity: 1;
transition: opacity 0.7s ease;
}