怎么样用css写一个带着炫酷带有动画动效的边框
时间: 2023-05-18 15:03:27 浏览: 145
你可以使用CSS的animation属性来创建带有动画效果的边框。以下是一个示例代码:
```css
.border {
border: 2px solid #fff;
position: relative;
animation: border 2s ease-in-out infinite;
}
@keyframes border {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
}
}
```
在这个示例中,我们创建了一个类名为“border”的元素,并为其设置了一个2像素宽的白色实线边框。我们还将其定位为相对位置,并为其添加了一个名为“border”的动画,该动画将在2秒内以缓入缓出的方式无限循环播放。
接下来,我们定义了一个名为“border”的关键帧动画,该动画将在0%、50%和100%的时间点上分别应用不同的CSS属性。在0%的时间点上,我们将元素的缩放比例设置为1,并将其阴影设置为白色半透明。在50%的时间点上,我们将元素的缩放比例设置为1.05,并将其阴影设置为透明。在100%的时间点上,我们将元素的缩放比例恢复为1,并将其阴影设置为白色半透明。
通过这种方式,我们可以创建一个带有炫酷动画效果的边框。