测试 - 活动筹备区 - 熊厂论坛

<div class="item" info="转动的边框线(两条)">
<img src="https://cbu01.alicdn.com/img/ibank/2017/885/731/4538137588_2027908770.jpg" border="0" alt="" style="max-width:400px">
</div>

<style type="text/css">
// 转动的边框线(两条)
div.item {
--bRadius: 10px;
div{
      position: relative;
      text-align: center;
      font-size: 24px;
      border: 2px solid rgb(179, 191, 231);
      border-radius: var(--bRadius);
      transition: all .3s;
      background-color: #eee;
      &::before, &::after {
         content: "";
         position: absolute;
         top: -10px;
         left: -10px;
         right: -10px;
         bottom: -10px;
         border: 2px solid rgb(17, 36, 100);
         transition: all .5s;
         border-radius: var(--bRadius);
         animation: clippath 3s infinite linear;
      }
      &::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%); }
      }

}
}
</style><style type="text/css" name="editorpostbg">body{background-image:url("static/image/postbg/1.jpg");}</style>