CSS实现菜单箭头动画效果

2024-02-23 16:28:56 头秃小天才

先上效果图：

其实是很简单的一个效果

思路：箭头图标相对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的时候给另一个元素添加动画。

到此这篇关于CSS实现菜单箭头动画效果的文章就介绍到这了,更多相关CSS 菜单箭头动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！