CSS 奇思妙想边框动画，前端开发速成
以下是一个简单的CSS边框动画示例，用于展示如何创建一个有趣的边框变换效果：
/* 基本样式 */
.box {
width: 100px;
height: 100px;
background-color: #58a;
margin: 50px;
border-radius: 8px;
position: relative;
animation: spin-border 4s linear infinite;
}
/* 关键帧动画 */
@keyframes spin-border {
0% {
border-width: 8px;
border-color: #fff;
}
50% {
border-width: 12px;
border-color: #58f;
}
100% {
border-width: 8px;
border-color: #fff;
}
}在HTML中，你可以这样使用这个类：
<div class="box"></div>这段代码会创建一个有着白色和蓝色边框不断旋转的小方块，动画会无限循环。通过调整.box类中的animation属性，你可以控制动画的速度、时长和其他行为。同时，通过调整@keyframes spin-border中的百分比，你可以控制动画的具体变化。
评论已关闭