Backrooms Wiki

请务必阅读顶端导航指南下面的所有文章。 提问,投诉和意见反馈请发送至管理层邮箱backrooms_cn@outlook.com

了解更多

Backrooms Wiki
Advertisement

这个是阿达的css测试页面,记录了一些在wiki上比较有趣的代码,可以单独拿出来复制粘贴。

鼠标光标改变

点击下面的字体可以观察改变

自动
添加
正常默认
点击状态
移动
左右
左下右上
左上右下
上下
同左下右上,代码不同
同左上右下,代码不同
同上下,代码不同
同左右,代码不同
打字
请稍后
问号

<template>

   
   
   
   
   <slot></slot>

</template>

<style lang="scss" scoped> .wrapper span {

 position: absolute;
 display: block;

}

.wrapper span:nth-child(1) {

 top: 0;
 left: -100%;
 width: 100%;
 height: 2px;
 animation: btn-anim1 4s linear infinite;

}

@keyframes btn-anim1 {

 0% {
   left: -100%;
 }
 50%,
 100% {
   left: 100%;
 }

}

.wrapper span:nth-child(2) {

 ...
 animation: btn-anim2 4s linear infinite;
 animation-delay: 1s;

}

@keyframes btn-anim2 {

 0% {
   top: -100%;
 }
 50%,
 100% {
   top: 100%;
 }

}

.wrapper span:nth-child(3) {

 ...
 animation: btn-anim3 4s linear infinite;
 animation-delay: 2s;

} </style>

Advertisement