流转动画做法

最新推荐文章于 2024-07-12 20:49:16 发布

秋落落落落叶

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量57

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_59866374/article/details/134884908

版权

给盒子添加ABCD的类名

ABCD盒子里添加

.ABCD{
border: 1px solid rgba(252, 138, 38, 0.3);
           /* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */
           position: relative;
           overflow: hidden;

}
.ABCD::before {
           content: " ";
           position: absolute;
           width: 1px;
           height: 100%;
           top: -100%;
       left: 0;
           background-image: linear-gradient(
               0deg,
               transparent,
               #ffaa00,
               transparent
           );
           animation: two 4s linear infinite;
       }
.ABCD::after {
           content: " ";
           position: absolute;
           width: 1px;
           height: 100%;
           bottom: -100%;
       right: 0;
           background-image: linear-gradient(
               360deg,
               transparent,
               #ffaa00,
               transparent
           );
           animation: four 4s linear 2s infinite;
       }
.ABCD .bottom {
           bottom: 0;
       left: -100%;
           background-image: linear-gradient(
               270deg,
               transparent,
               #ffaa00,
               transparent
           );
           animation: one 4s linear 1s infinite;
       }

       .ABCD .top {
           top: 0;
       right: -100%;
           background-image: linear-gradient(
               270deg,
               transparent,
               #ffaa00,
               transparent
           );
           animation: three 4s linear 3s infinite;
       }

.ABCD i {
           position: absolute;
           display: inline-block;
           height: 1px;
           width: 100%;
       }

@keyframes one {
           0% {
               left: -100%;
           }
           50%,
           100% {
               left: 100%;
           }
       }
@keyframes two {
           0% {
               top: -100%;
           }
           50%,
           100% {
               top: 100%;
           }
       }

       @keyframes three {
           0% {
               right: -100%;
           }
           50%,
           100% {
               right: 100%;
           }
       }

       @keyframes four {
           0% {
               bottom: -100%;
           }
           50%,
           100% {
               bottom: 100%;
           }
       }