这个是阿达的css测试页面,记录了一些在wiki上比较有趣的代码,可以单独拿出来复制粘贴。
鼠标光标改变
点击下面的字体可以观察改变
自动
添加
正常默认
点击状态
移动
左右
左下右上
左上右下
上下
同左下右上,代码不同
同左上右下,代码不同
同上下,代码不同
同左右,代码不同
打字
请稍后
问号
<template>
clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
</template>
<script> export default {
name: 'App',
}; </script>
<style> div {
width: 200px; height: 100px; background: #7bbed8; color: #000; animation: clip-enter 8s linear infinite;
}
@keyframes clip-enter {
0% {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
} </style>