站点主版式更新日志

后室短文竞赛同款炫酷代码

更新时间：2023年1月2日10:59:32

操作者：x1193

创作者：GaplouelPew

应用实例

站点主版式

更新啦

代码

[[div class="dwjs"]]
【无操作时显示字符】
[[div]]
【有操作时显示字符】
[[/div]]
[[/div]]

CSS

.dwjs {
    user-select: none;
    justify-content: center;
    margin-left: 60px;
    display: flex;
    font-size: 400%;
    font-weight: bold;
    transition: all 1s;
    height: 8rem;
    align-items: center;
}
 
.dwjs p {
    z-index: 2;
    margin: 0;
}
 
.dwjs div {
    margin-left: -7.5rem;
    opacity: 0;
    transition: all 1s;
    z-index: 0;
}
 
.dwjs:hover {
    margin-left: 0;
}
 
.dwjs:hover div {
    margin-left: 0;
    opacity: 1;
}
 
@media (max-width: 768px) {
.dwjs {
    margin-left: 45px;
}
}

更新内容使用方法

将中括号内的文字替换即可

---

警戒线div块

更新时间：2022年10月2日18:25:08

操作者：x1193

创作者：hoah2333&GaplouelPew

应用实例

站点主版式更新了！

代码

[[div_ class="cordon"]]
[[div_ class="cordonxtw" style="transform: rotate(180deg);"]]
[[/div]]
[[div_]]
【这里是页面的名称】
[[/div]]
[[div_ class="cordonxtw"]]
[[/div]]
[[a href="【这里是页面链接】"]][[/a]]
[[/div]]

CSS

.cordon {
    text-align: center;
    position: relative;
    border: black 2px solid;
    background-color: #fce100;
    font-weight: bold;
    font-size: 2rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
}
.cordon br {
    display: none;
}
.cordon a {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.cordonxtw {
    background: linear-gradient(45deg, #fce110 30%, black 0, black 60%, #fce110 0) 0/50px repeat-x;
    height: 20px;
    animation: cordonxtw 1s infinite linear;
}
@keyframes cordonxtw {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 0;
    }
}

更新内容使用方法

将中括号内的文字替换即可

---