纯css实现动态边框的示例代码

下面我将详细讲解如何纯CSS实现动态边框，并提供两个示例说明。

实现动态边框的步骤

1. 首先，我们需要创建一个div容器，设置其宽度、高度、边框和背景色等基本样式。

css
.container {
width: 200px;
height: 200px;
border: 2px solid #ccc;
background-color: #f7f7f7;
}

1. 接下来，我们需要给这个容器设置伪元素::before和::after，并分别对它们进行绝对定位。这里我们设置::before在容器上边框下方，::after在容器下边框上方。

css
.container::before, .container::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ccc;
}
.container::before {
top: -2px;
}
.container::after {
bottom: -2px;
}

1. 现在，容器的上下边框下方已经出现了两条长条，但是它们距离容器边缘非常近，我们需要借助transform属性来让它们变宽。

css
.container::before, .container::after {
/* 之前的样式 */
transform: scaleX(0); /* 初始宽度为0 */
transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

1. 最后，我们需要利用hover伪类选择器，让容器悬停时，两个边框下方的长条变成实心，并且宽度变宽。

css
.container:hover::before, .container:hover::after {
transform: scaleX(1); /* 鼠标悬停后，宽度为100% */
/* 由于四周的距离时刻变化，因此用百分比宽度更好一些 */
background-color: #2ecc71; /* 长条变成实线 */
}

以上四步就是纯CSS实现动态边框的基本流程。具体实现时，我们可以根据需求进行调整。

示例1

下面是一个很简单的例子，它的效果是鼠标悬停时，容器的四周出现实心边框。

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

.box {
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  position: relative;
  margin: 50px auto;
}

.box::before,
.box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #2ecc71;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.box::before {
  top: -2px;
}

.box::after {
  bottom: -2px;
}

.box:hover::before,
.box:hover::after {
  transform: scaleX(1);
}

示例2

下面这个例子是一个按钮，鼠标悬停时，按钮左右两侧出现橙色下划线。同时，我们添加了鼠标点击效果，当点击按钮后，下划线变成实心。

<button class="button">点击我</button>

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2ecc71;
  color: #fff;
  border: none;
  font-size: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button::before,
.button::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ff8c00;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.button::before {
  top: 0;
}

.button::after {
  bottom: 0;
}

.button:hover::before,
.button:hover::after {
  transform: scaleX(1);
}

.button:active::before,
.button:active::after {
  transform-origin: center;
  transform: scaleX(1);
}

以上就是两个纯CSS实现动态边框的示例。通过这些示例，我们可以看到动态边框可以增加页面的交互效果，使页面更加生动有趣。