这个是阿达的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>