CSS实线边框loading动画实例页面
回到相关文章 »效果(点击图片变双线):
代码:
CSS代码:
.box { display: inline-block; padding: 10px; position: relative; } .box::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 2px solid #cd0000; animation: borderAround 1.5s infinite linear; } @keyframes borderAround { 0%, 100% { clip: rect(0 148px 2px 0); } 25% { clip: rect(0 148px 116px 146px); } 50% { clip: rect(114px 148px 116px 0); } 75% { clip: rect(0 2px 116px 0); } }
HTML代码:
<div class="box"> <img src="mm1.jpg" width="128" height="96"> </div>