流动的css 边框 前端 521 一页书 2021-01-18 16:33:06 ```html body, html { width: 100%; height: 100%; display: flex; } div { position: relative; margin: auto; width: 220px; line-height: 164px; text-align: center; color: #fff; font-size: 20px; border: 2px solid gold; border-radius: 10px; background: gold; transition: all .3s; cursor: pointer; &:hover { filter: contrast(1.1); } &:active { filter: contrast(0.9); } &::before, &::after { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px solid gold; transition: all .5s; animation: clippath 3s infinite linear; border-radius: 10px; } &::after { animation: clippath 3s infinite -1.5s linear; } } @keyframes clippath { 0%, 100% { clip-path: inset(0 0 98% 0); } 25% { clip-path: inset(0 98% 0 0); } 50% { clip-path: inset(98% 0 0 0); } 75% { clip-path: inset(0 0 0 98%); } } .bg::before { background: rgba(255, 215, 0, .5); } ```