【css】炫酷半边边框效果div

最新推荐文章于 2024-07-11 17:28:05 发布

KatyLight

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量1.4k

点赞数

分类专栏：样式文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_33014695/article/details/125101437

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

这个效果很炫酷，在hover的时候，线条会靠近文本中心。用到了两个伪类实现。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      background-color: #420713;
    }
    .incomplete{
      background-image: linear-gradient(#000000AA 10%,transparent) ;
      padding: 20px;
      color: white;
      position: relative;
      border: 10px solid transparent;
      background-clip: padding-box;
    }
    .incomplete::after{

      right:  -10px;
      top:  -10px;

      border-top: 1px dashed white;
      border-right: 1px dashed white;
    }
    .incomplete:hover::after{
      right:-1px;
      top: -1px;
      transition: all ease-in .2s;
    }
    .incomplete:hover::before{
      bottom:-1px;
      left:-1px;
      transition: all ease-in .2s;
    }
    .incomplete::after,    .incomplete::before{
      pointer-events: none;
      content: '';
      display: block;
      position: absolute;
      width: 80%;
      height: 50%;
      transition: all ease-in .2s;
    }
    .incomplete::before{

      bottom: -10px;
      left:  -10px;

      border-left: 1px dashed white;
      border-bottom: 1px dashed white;
    }
  </style>
</head>
<body>
<div class="incomplete">
  <h1>love you too</h1>
  <h1>love you too</h1>
  <h1>love you too</h1>
  <h1>love you too</h1>
</div>
</body>
</html>