*{margin:0;填充：0；}.big{边距：150px自动；背景：黑色；宽度：258px；高度：307px；位置：相对；}。大p{高度：1px；宽度：50px；背景：rgba(7,241,250,1)；位置：绝对；}.bigp:nth-child(1){top:5px;左：5px；}.bigp:nth-child(2){高度：50px；宽度：1px；底部：5px；右：5px；}.bigp:nth-child(3){底部：5px；右：5px；}.bigp:nth-child(4){高度：50px；宽度：1px；顶部：5px；左：5px；}.bigp:nth-child(1){动画：pOne4s线性无限；}@keyframespOne{0%{左：5px；宽度：50px；}10%{左：5px；宽度：100px；}40%{左：153px；宽度：100px；}60%{左：253px；宽度：0px；}80%{左：5px；宽度：0px；}100%{左：5px；宽度：50px；}}.bigp:nth-child(2){动画：pTow4s线性无限；}@keyframespTow{0%{顶部：252px；高度：50px；}10%{顶部：302px；高度：0px；}40%{顶部：5px；高度：0px；}60%{顶部：5px；高度：100px；}80%{顶部：202px；高度：100px；}100%{顶部：252px；高度：50px；}}.bigp:nth-child(3){动画：pThree4s线性无限；}@keyframespThree{0%{右：5px；宽度：50px；}10%{右：5px；宽度：100px；}40%{右：153px；宽度：100px；}50%{右：253px；宽度：0px；}80%{右：5px；宽度：0px；}100%{右：5px；宽度：50px；}}.bigp:nth-child(4){动画：pFour4s线性无限；}@keyframespFour{0%{顶部：5px；高度：50px；}10%{顶部：5px；高度：0px；}40%{顶部：302px；高度：0px；}60%{顶部：202px；高度：100px；}80%{顶部：5px；高度：100px；}100%{顶部：5px；高度：50px；}}这种效果是一种掩饰，四条线向同一方向移动。代码如下：*{margin:0;填充：0；}.big{边距：150px自动；背景：黑色；宽度：258px；高度：307px；位置：相对；}。大p{高度：1px；宽度：50px；背景：rgba(7,241,250,1)；位置：绝对；}.bigp:nth-child(1){top:5px;左：5px；}.bigp:nth-child(2){高度：50px；宽度：1px；底部：5px；右：5px；}.bigp:nth-child(3){底部：5px；右：5px；}.bigp:nth-child(4){高度：50px；宽度：1px；顶部：5px；左：5px；}.bigp:nth-child(1){动画：pOne4s线性无限；}@keyframespOne{0%{左：5px；宽度：50px；}10%{左：5px；宽度：100px；}40%{左：153px；宽度：100px；}60%{左：253px；宽度：0px；}80%{左：5px；宽度：0px；}100%{左：5px；宽度：50px；}}.bigp:nth-child(2){动画：pTow4s线性无限；}@keyframespTow{0%{顶部：252px；高度：50px；}10%{顶部：302px；高度：0px；}40%{顶部：5px；高度：0px；}60%{顶部：5px；高度：100px；}80%{顶部：202px；高度：100px；}100%{顶部：252px；高度：50px；}}.bigp:nth-child(3){动画：pThree4s线性无限；}@keyframespThree{0%{右：5px；宽度：50px；}10%{右：5px；宽度：100px；}40%{右：153px；宽度：100px；}50%{右：253px；宽度：0px；}80%{右：5px；宽度：0px；}100%{右：5px；宽度：50px；}}.bigp:nth-child(4){动画：pFour4s线性无限；}@keyframespFour{0%{顶部：5px；高度：50px；}10%{顶部：5px；高度：0px；}40%{顶部：302px；高度：0px；}60%{顶部：202px；高度：100px；}80%{顶部：5px；高度：100px；}100%{顶部：5px；高度：50px；}}
