如何使用 CSS 创建边框动画？

在网页设计中，动画可以为页面添加更多的生动性和互动性，吸引用户的注意力。本文将介绍如何使用CSS创建简单的边框动画，让你的页面更加生动活泼。

CSS Border 属性

在介绍如何创建边框动画之前，我们先来了解一下CSS中的Border属性。Border是CSS中用来设置元素边框的属性，包括Border-Width、Border-Style和Border-Color三个子属性，分别用于设置边框的宽度、样式和颜色。

border: 1px dashed #999;

以上代码就是设置了一个1像素宽度、虚线边框、颜色为#999的元素边框。

使用CSS创建边框动画

接下来，我们将使用CSS3的transition和animation属性，实现边框动画效果。

1. 使用CSS3的transition属性

CSS3的transition属性可以设置元素在不同状态下的过渡效果，实现平滑的动态变化效果。我们可以使用如下代码创建一个简单的边框动画：

.box{
  width: 200px;
  height: 100px;
  border: 1px solid #999;
  transition: border 0.5s ease;
}
.box:hover{
  border: 5px solid #f00;
}

以上代码中，.box是一个宽200px，高100px的盒子，初始状态下，边框为1像素实线边框，颜色为#999。我们使用transition属性为元素的Border属性设置过渡效果，当盒子处于初始状态时，其边框变化的过渡时间为0.5秒，过渡效果为ease（匀速变化）。当鼠标移动到盒子上时，我们使用:hover选择器为盒子增加边框，边框的样式为5像素的实线边框，颜色为红色。此时，我们设置的过渡效果就会生效，盒子边框会慢慢的从原本的1像素变为5像素，颜色也会慢慢的变成红色。

2. 使用CSS3的animation属性

CSS3的animation属性可以创建复杂的动画效果，包括位置、大小、颜色等多种变化效果。我们可以使用如下代码创建一个简单的边框动画：

.box{
  width: 200px;
  height: 100px;
  border: 1px solid #999;
  animation: border 1s ease-in-out infinite;
}
@keyframes border{
  0%{
    border: 1px solid #999;
  }
  50%{
    border: 5px solid #f00;
  }
  100%{
    border: 1px solid #999;
  }
}

以上代码中，我们通过animation属性为元素设置了一个名为border的动画，动画时间为1秒，过渡效果为ease-in-out（先加速后减速），无限循环。我们使用@keyframes关键字定义了动画的变化规律，在0%和100%的时候，盒子边框的样式和初始状态一致，也就是1像素实线边框，颜色为#999。在50%的时候，盒子边框变成了5像素实线边框，颜色为红色。当动画执行完成后，再次回到0%的时候，盒子边框也恢复到了初始状态。

总结

本文介绍了如何使用CSS创建边框动画，分别使用了transition和animation两个属性来实现。通过对CSS3的基本属性学习及运用，可以让你的页面更加生动活泼，吸引用户的注意力。