css边框流动效果

最新推荐文章于 2024-08-04 15:00:00 发布

五彩斑斓黑123

最新推荐文章于 2024-08-04 15:00:00 发布

阅读量661

点赞数 2

分类专栏： css 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_69444691/article/details/130716482

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

“好看的皮囊千篇一律，有趣的css百里挑一”。分享一个今天刷到的css制作动画的demo。

其中使用到了伪元素，关于伪元素的使用方法，我在常用的css选择器中有讲到
inset：用作定位元素的 top、right、bottom、left 这些属性的简写。案例中使用的ins：5pxp;相当于top: 5px; right: 5px; bottom: 5px; left: 5px;值得注意的是inset 属性只作用于定位元素

上代码：

html部分只需要定义一个盒子

 <div class="box"></div>

css部分：

 * {
      margin: 0;
      padding: 0;
    }
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 180px;
      height: 250px;
      border-radius: 20px;
      margin: 100px auto;
      background-color: #000;
      overflow: hidden;
    }
    .box::before {
      content: '';
      position: absolute;
      width: 120px;
      height: 120%;
      background: linear-gradient(#03fcc6, #ff0296);
      animation: rotates 4s linear infinite;
    }
    .box::after {
      content: '';
      position: absolute;
      border-radius: 20px;
      inset: 5px;
      background-color: #0e1538;
    }
    @keyframes rotates {
      to {
        transform: rotate(360deg);
      }
    }

演示效果：