欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實現(xiàn)菜單箭頭動畫效果

  發(fā)布時間：2024-02-23 16:28:56   作者：頭禿小天才   我要評論
箭頭動畫是一種常見的交互式元素,可以在網(wǎng)頁中用于引導(dǎo)用戶，本文主要介紹了CSS實現(xiàn)菜單箭頭動畫效果，具有一定的參考價值，感興趣的可以了解一下

先上效果圖：

 其實是很簡單的一個效果

思路：箭頭圖標(biāo)相對li標(biāo)簽絕對定位，定位到列表之外+列表元素overflow：hidden

+懸停動畫

html

  <li class="listyle1">
      <img src="./arrow.png" alt=""  class="arrow">風(fēng)光攝影
  </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;
//兼容不同內(nèi)核瀏覽器
  -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部分核心代碼的寫法，給箭頭圖標(biāo)加懸停css是針對圖標(biāo)的，而這個寫法意思就是懸停li標(biāo)簽時li中的arrow圖標(biāo)添加動畫，從而實現(xiàn)懸停一個元素li的時候給另一個元素添加動畫。

到此這篇關(guān)于CSS實現(xiàn)菜單箭頭動畫效果的文章就介紹到這了,更多相關(guān)CSS 菜單箭頭動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論