CSS 奇思妙想边框动画，附小技巧，35岁学习web前端开发
CSS 边框动画可以通过关键帧（@keyframes）和动画（animation）属性来实现。以下是一个创建边框动画的示例，其中使用了CSS3的特性。
/* 定义关键帧 */
@keyframes growShrink {
0% {
border-width: 5px;
}
50% {
border-width: 10px;
}
100% {
border-width: 5px;
}
}
/* 应用动画到元素 */
.border-animation {
width: 100px;
height: 100px;
border-style: solid;
border-color: #333;
border-radius: 50%;
animation: growShrink 2s infinite alternate; /* 无限次数循环，交替方向 */
}HTML 部分：
<div class="border-animation"></div>这段代码会创建一个圆形的边框动画，边框会不断地放大缩小。animation属性设置了动画的名称（growShrink）、持续时间（2s）、循环次数（infinite）以及动画的起始状态（alternate，即交替方向播放）。
评论已关闭