CSS实现菜单箭头动画效果

最新推荐文章于 2024-04-14 19:00:49 发布

头秃小天才

最新推荐文章于 2024-04-14 19:00:49 发布

阅读量1k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_30907143/article/details/131442743

版权

文章展示了如何通过CSS实现一个简单的列表项悬停效果，其中箭头图标在li标签悬停时进行平移动画。关键技巧包括将箭头图标绝对定位在列表之外，利用overflow:hidden隐藏超出部分，以及应用CSStransition属性创建平滑的悬停动画。伪元素方法在此场景中不适用，因为它们无法直接响应li标签的悬停事件。

摘要由CSDN通过智能技术生成

先上效果图：

其实是很简单的一个效果

思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden

+悬停动画

html:

  <li class="listyle1">
      <img src="./arrow.png" alt=""  class="arrow">风光摄影
  </li>

css:

.listyle1 {
  overflow: hidden;
  position: relative;
}

.listyle1:hover {
  color: #b13732;
  font-weight: 600;
  cursor: pointer;
}

//箭头

.arrow {
  position: absolute;
  left: -12px;
  top: 15px;
  transition: transform 0.5s ease-out;
//兼容不同内核浏览器
  -webkit-transition: transform 0.5s ease-out;
  -moz-transition: transform 0.5s ease-out;
  -ms-transition: transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
}
//核心代码
.listyle1:hover .arrow {
  transform: translateX(40px);
  -webkit-transform: translateX(40px);
  -moz-transform: translateX(40px);
  -ms-transform: translateX(40px);
  -o-transform: translateX(40px);
}

尝试了伪元素的方法，但悬停li时给伪元素添加动画实践下来是不可以的。

个人理解是因为伪元素并不真实存在

其实主要的核心就是悬停一个元素li的时候给另一个元素添加动画，注意css部分核心代码的写法，给箭头图标加悬停css是针对图标的，而这个写法意思就是悬停li标签时li中的arrow图标添加动画，从而实现悬停一个元素li的时候给另一个元素添加动画。