css3 hover border 流动效果

博客围绕前端领域的CSS和CSS3展开,虽未给出具体内容,但可知聚焦于这两项前端技术,CSS和CSS3在前端页面设计、样式布局等方面有重要作用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 

/* Hover 边线流动 */

.hoverDrawLine {
  border: 0 !important;
  position: relative;
  border-radius: 5px;
  --border-color: #60daaa;
}
.hoverDrawLine::before,
.hoverDrawLine::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  border: 2px solid transparent;
  border-radius: 5px;
  width: 0;
  height: 0;
}
.hoverDrawLine::before {
  top: 0;
  left: 0;
  -webkit-transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,
    border-color 0s ease-in-out 1s;
  transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,
    border-color 0s ease-in-out 1s;
}
.hoverDrawLine::after {
  bottom: 0;
  right: 0;
  -webkit-transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,
    border-color 0s ease-in-out 0.5s;
  transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,
    border-color 0s ease-in-out 0.5s;
}

.hoverDrawLine:hover::before,
.hoverDrawLine:hover::after {
  width: 100%;
  height: 100%;
}
.hoverDrawLine:hover::before {
  border-top-color: var(--border-color);
  border-right-color: var(--border-color);
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hoverDrawLine:hover::after {
  border-bottom-color: var(--border-color);
  border-left-color: var(--border-color);
  -webkit-transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
  transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div class="hoverDrawLine"></div>

### 创建箭头流动效果 要通过 CSS 实现箭头的流动效果,可以利用 `@keyframes` 定义画的关键帧,并结合伪元素 `::before` 或 `::after` 来生成箭头形状。以下是具体方法: #### 使用渐变背景和线性画模拟流动效果 可以通过设置箭头区域的背景为渐变颜色,并让该背景沿某一方向移,从而形成视觉上的“流动”感。 ```css .arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid #ff7e5f; /* 初始颜色 */ position: relative; } .arrow::before { content: ""; position: absolute; top: -10px; left: -20px; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 126, 95, 0), rgba(255, 126, 95, 1)); animation: flow 2s infinite alternate; z-index: -1; } @keyframes flow { from { transform: translateX(-10%); } to { transform: translateX(10%); } } ``` 上述代码中,`.arrow` 是一个标准的三角形箭头[^1],并通过伪类 `::before` 添加了一个带有渐变背景的效果。`@keyframes` 中定义了水平位移画 (`translateX`),使背景看起来像在流动一样[^3]。 #### 结合悬停事件增强交互体验 如果希望当鼠标悬浮到某个菜单项时触发箭头的流动效果,则可参考如下代码片段: ```css .menu-item { display: inline-block; margin: 10px; padding: 10px; cursor: pointer; position: relative; } .menu-item:hover .arrow { animation-play-state: running; } .menu-item .arrow { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid #ff7e5f; position: relative; animation: none; } .menu-item .arrow::before { content: &#39;&#39;; position: absolute; top: -10px; left: -20px; width: 100%; height: 100%; background: linear-gradient(to right, rgba(255, 126, 95, 0), rgba(255, 126, 95, 1)); animation: flow 2s infinite alternate paused; z-index: -1; } @keyframes flow { from { transform: translateX(-10%); } to { transform: translateX(10%); } } ``` 在此示例中,只有当 `.menu-item` 被悬停时,才会激活子元素 `.arrow` 的流动画[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieZhengChina

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值