CSS实现旋转边框效果

最新推荐文章于 2024-06-22 12:54:40 发布

等风起_

最新推荐文章于 2024-06-22 12:54:40 发布

阅读量1k

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/wxf983364/article/details/130848262

版权

该文章展示了如何仅使用CSS实现一个旋转边框的视觉效果。通过在<div>元素上应用伪类:before和:after，结合linear-gradient和关键帧动画@keyframes，创建了一个从蓝色到紫色的渐变旋转边框，同时保持内容居中且背景色为深蓝色。

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

一个简单的用CSS就就可以轻松实现的小效果：旋转边框

效果：

实现：

H5代码

  <div class="box">
    <h2>旋转边框</h2>
  </div>

CSS代码

  .box {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #0e1538;
    border-radius: 15px;
    margin: 200px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .box h2 {
    color: #fff;
    font-size: 22px;
    text-shadow: 2px 2px 4px #e74033;
    z-index: 1;
  }

  .box::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 120%;
    background: linear-gradient(#00ccff, #d500f9);
    animation: rotate 3s linear infinite;
  }

  .box::after {
    content: '';
    position: absolute;
    background: #0e1538;
    inset: 6px;
    border-radius: 14px;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
      transform-origin: top;
    }

    to {
      transform: rotate(360deg);
      transform-origin: top;
    }
  }