div边框线运动
时间: 2023-06-29 21:13:34 浏览: 44
可以使用CSS动画和`outline`属性来创建边框线运动效果。以下是一个简单的示例:
HTML代码:
```html
<div class="border"></div>
```
CSS代码:
```css
.border {
width: 200px;
height: 200px;
margin: 50px auto;
outline: 2px dashed #333;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
outline-offset: 0;
}
100% {
outline-offset: 10px;
}
}
```
解释:
- `width: 200px;` 和 `height: 200px;` 属性将`.border`元素的宽度和高度设置为200px。
- `margin: 50px auto;` 属性将`.border`元素在水平方向上居中,并将其顶部与屏幕顶部距离设置为50px。
- `outline: 2px dashed #333;` 属性将`.border`元素的边框线设置为2px宽的虚线,颜色为黑色。
- `animation` 属性为边框线定义了一个运动效果,并且设置为无限循环播放。
- `@keyframes` 定义了边框线的动画效果,通过 `outline-offset` 属性将其沿着外部扩展。
这样,您就可以创建一个简单的边框线运动效果。您可以根据需要调整边框线的颜色、宽度和动画的持续时间。