其实是很简单的一个效果
思路：箭头图标相对li标签绝对定位，定位到列表之外+列表元素overflow：hidden
+悬停动画
html
|
1 2 3 |
<li class="listyle1"> <img src="./arrow.png" alt="" class="arrow">风光摄影 </li> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.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的时候给另一个元素添加动画。
