CSS3实现边框线条动画特效
时间: 2024-02-11 21:08:36 浏览: 137
CSS3实现的鼠标滑过边框线条动画特效源码.zip
可以使用CSS3中的transition和transform属性来实现边框线条动画特效。以下是一个示例代码:
```html
<div class="box"></div>
```
```css
.box {
width: 200px;
height: 200px;
border: 2px solid #333;
transition: all 0.5s ease;
}
.box:hover {
transform: scale(1.2);
border-color: #ff0000;
}
```
在上述代码中,使用了transition属性来控制所有属性变化的时间为0.5秒,使用transform属性对鼠标悬停时的缩放进行了动画效果,使用border-color属性对边框颜色进行了动画效果。当鼠标悬停时,会触发:hover伪类,使元素产生动画效果。
阅读全文