CSS实现虚线边框旋转动画实例

<style>
.box {
 width: 200px;
 background:
 repeating-linear-gradient(135deg, red, transparent 3px, #000 3px, #000 9px); 
animation: shine 1s infinite linear;
 overflow: hidden; 
} 
.text {
text-align:center;
font-size:3em;
line-height:50px;
 height: 128px; 
margin: 1px;
 padding: 10px; 
background-color:#fff; 
} 
@keyframes shine {
0% { background-position: -1px -1px;}
 100% { background-position: -12px-12px;} }
</style>

<div class="box">
    <div class="text">魂牵梦绕</div>
</div>