注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
- Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。
<template>
<div id="app">
clip-path CSS
属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
</div>
</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>