观看解锁下一章（伪广告页组件）

恭喜你，成功看完广告并解锁该组件!

你可以使用：
[[include :backrooms-wiki-cn:component:fake-read-ad
|auto-skip=如果为a，不出现X按钮而是直接渐出
|ad-img=你的广告图片
|ad-goto=你的广告指向的链接
]]
导入该组件

此外，你可以使用自定义html广告内容，
[[include :backrooms-wiki-cn:component:fake-read-ad
|ad-img=http://backrooms-wiki-cn.wikidot.com/local--files/component:fake-read-ad/empty（这是一个空图片，你也可以自定义）
|ad-goto=你的广告指向的链接
|html-ad=a
|ad-html-content=把你的html源码去掉换行
]]

应当感谢成人内容警告，因为我借鉴了其"在可折叠列表块外面加上.unfolded/.folded的div"思路。

预览图片来自Stable Difussion，该生图可用于任意授权模式下使用，理应兼容CC。
你要代码吗，这次不用看广告解锁。

#page-content{
    position:relative;
}
#u-ad-tips{
    text-align:center;
    font-weight:750;
    font-size:1.1rem;
    color: rgb(var(--ad-text-color));
}
ul.fake-ad-container{
    position:static;
    list-style: none;
    display:content;
    padding:0;
    margin:0;
    padding-inline-start:0;
    --ad-back-color:var(--pale-gray-monochrome);
    --ad-text-color:var(--bright-accent);
    --ad-progress-color:255,204,0;
}
.fake-ad-container li{
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    background-color:rgb(var(--ad-back-color));
    position:absolute;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0 0 01rem;
    border-radius:12px;
    z-index:6;
    justify-content:center;
    transition:opacity 0.5s ease-in-out;
}
.fake-ad-container li.folded {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}
.fake-ad-container div.ad-progress{
    color:transparent;
    position:static;
    display:block;
    top:0;
    left:0;
    width: 100%;
    height:10px;
    background: rgb(var(--ad-text-color));
    border-radius: 6px 6px 0 0;
    z-index:7;
    margin:0;
    overflow:hidden;
}
.fake-ad-container div.ad-progress::before{
    content:"";
    position:absolute;
    display:block;
    top:0;
    left:0;
    width: 100%;
    height: 10px;
    background:rgb(var(--ad-progress-color));
    border-radius:inherit;
    transform-origin: left center;
    animation: countdown 10.2s linear forwards;
}
@keyframes countdown {
  from { transform: scaleX(1);}
  to { transform: scaleX(0);}
}
.timer{
    position:absolute;
    top:1.5rem;
    right:1rem;
    color:rgb(var(--ad-text-color));
    font-size:1.5rem;
}
.close-btn a{
    position:relative;
    top:-1rem;
    color:rgb(var(--ad-text-color));
    text-decoration:none;
    border-radius:6px;
    padding:0 0.3rem;
    transition:background-color 0.3s ease-in-out;
}
.close-btn a:hover{
    background-color:rgba(0,0,0,0.3);
}
div.ad-content{
    max-width: 95%;
    max-height: 80%;
    overflow: auto;
    display: flex;
    text-align: center;
    padding:20px;
    margin:0 auto;
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    flex-direction:column;
    overflow: hidden;
}
.ad-content a{
    display: inline-block;
    border-radius:6px;
    transform: scale(1);
    overflow:hidden;
    transition:all 0.3s ease-in-out;
    border:2px solid rgb(var(--ad-text-color));
}
.ad-content a img.image{
    display:block;
    min-width: 100px;
    min-height: 100px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin:0 auto;
}
.ad-content a:hover{
    border-radius:12px;
    transform: scale(1.05);
    border:2px solid rgb(var(--ad-text-color));
}
.ad-content p{
     width:100%;
}
.ad-content iframe{
     width:100%;
     min-height:100px;
}
/* Fuck its 沃德 timer*/
.ad-countdown .num10 { animation: digit10 10s linear forwards; }
.ad-countdown .num9 { animation: digit9 10s linear forwards; }
.ad-countdown .num8 { animation: digit8 10s linear forwards; }
.ad-countdown .num7 { animation: digit7 10s linear forwards; }
.ad-countdown .num6 { animation: digit6 10s linear forwards; }
.ad-countdown .num5 { animation: digit5 10s linear forwards; }
.ad-countdown .num4 { animation: digit4 10s linear forwards; }
.ad-countdown .num3 { animation: digit3 10s linear forwards; }
.ad-countdown .num2 { animation: digit2 10s linear forwards; }
.ad-countdown .num1 { animation: digit1 11s linear forwards; }
@keyframes digit10 {
    0% { opacity: 1; }
    10% { opacity: 1; }
    10.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit9 {
    0%, 10% { opacity: 0; }
    10.01% { opacity: 1; }
    20% { opacity: 1; }
    20.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit8 {
    0%, 20% { opacity: 0; }
    20.01% { opacity: 1; }
    30% { opacity: 1; }
    30.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit7 {
    0%, 30% { opacity: 0; }
    30.01% { opacity: 1; }
    40% { opacity: 1; }
    40.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit6 {
    0%, 40% { opacity: 0; }
    40.01% { opacity: 1; }
    50% { opacity: 1; }
    50.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit5 {
    0%, 50% { opacity: 0; }
    50.01% { opacity: 1; }
    60% { opacity: 1; }
    60.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit4 {
    0%, 60% { opacity: 0; }
    60.01% { opacity: 1; }
    70% { opacity: 1; }
    70.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit3 {
    0%, 70% { opacity: 0; }
    70.01% { opacity: 1; }
    80% { opacity: 1; }
    80.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit2 {
    0%, 80% { opacity: 0; }
    80.01% { opacity: 1; }
    90% { opacity: 1; }
    90.01% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes digit1 {
    0%, 81.80% { opacity: 0; }
    81.81% { opacity: 1; }
    90% { opacity: 1; }
    90.01% { opacity: 0; }
    100% { opacity: 0; }
}
.ad-countdown .close-btn {
    opacity: 0;
    animation: showX 0.3s ease-out 10s forwards;
    pointer-events: none;
}
@keyframes showX {
    to { opacity: 1; pointer-events: auto;}
}

/* 自动关闭广告 代码选项*/
ul.fake-ad-container,.fake-ad-container li{
  animation: fadeOut 0.3s linear 9.8s forwards;
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* 自定义模式 代码选项*/
ul.fake-ad-container{
    --back-color:{$back-color};
    --text-color:{$text-color};
    --progress-color:{$progress-color};
}

搞笑组件自删

后室中文被删除文章备份

记录遗失