css 边框流动效果

最新推荐文章于 2024-06-28 14:24:07 发布

弦弦弦

最新推荐文章于 2024-06-28 14:24:07 发布

阅读量1.1k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45735694/article/details/126380133

版权

这篇博客展示了如何利用CSS的伪元素（::before和::after）结合动画来实现一个创新的边框效果。代码示例中，一个名为.txbox的div通过设置高度、边框、内边距等属性创建了基本框架，然后使用伪元素添加了一个旋转的白色背景和一个内部边框，通过keyframes定义动画实现3秒无限循环的旋转效果。

摘要由CSDN通过智能技术生成

通过伪元素及动画实现，复制即可食用
在这里插入图片描述

 <div class="txbox">border</div>
  .txbox {
          height: 200px;
          border: 1px solid #000;
          border-radius: 10px;
          position: relative;
          text-align: center;
          line-height: 200px;
          z-index: 1;
          overflow: hidden;
          background: #000;
        }
         .txbox::before {
          content: "";
          display: block;
          position: absolute;
          width: 60%;
          height: 60%;
          left: 50%;
          top: 50%;
          background: #fff;
          z-index: -2;
          transform-origin: 0 0;
          animation: rotate 3s infinite linear;
        }
          @keyframes rotate {
          to {
            transform: rotate(1turn);
          }
          // 0% {background: red;left: 0px;top: 0px;}
          // 25% {background: yellow;left: 200px;top: 0px; }
          // 50% {background: skyblue;left: 200px;top: 200px;}
          // 75% {background: green;left: 0px;top: 200px; }
          // 100% {background: #fff;left: 0px;top: 0px;}
        }
        .txbox::after {
          border-radius: 10px;
          content: "";
          display: block;
          position: absolute;
          border: 1px solid #000;
          width: calc( 100% - 4px);
          height: calc( 100% - 4px);
          left: 1px;
          top: 1px;
          background: #fff;
          z-index: -1;
        }