<html> <title>动态的边框</title> <style> .border, .border::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .border { width: 200px; height: 200px; margin: auto; color: #69ca62; box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); } .border::after { content: ''; margin: -2%; box-shadow: inset 0 0 0 2px; animation: clipMe 5s linear infinite; } .border::before { animation-delay: -4s; } @keyframes clipMe { 0%, 100% { clip: rect(0px, 220.0px, 2px, 0px); } 25% { clip: rect(0px, 2px, 220.0px, 0px); } 50% { clip: rect(218.0px, 220.0px, 220.0px, 0px); } 75% { clip: rect(0px, 220.0px, 220.0px, 218.0px); } } </style> <body> <div> <div class="border"></div> </div> </body> </html>
css实现动态边框
猜你喜欢
转载自www.cnblogs.com/victoria-csl/p/12167436.html
今日推荐
周排行