亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

先上效果圖：

 其實是很簡單的一個效果

思路：箭頭圖標相對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圖標添加動畫，從而實現(xiàn)懸停一個元素li的時候給另一個元素添加動畫。

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

相關文章

最新評論