CSS實(shí)現(xiàn)菜單箭頭動畫效果
發(fā)布時(shí)間：2024-02-23 16:28:56 作者：頭禿小天才 
我要評論
我要評論箭頭動畫是一種常見的交互式元素,可以在網(wǎng)頁中用于引導(dǎo)用戶，本文主要介紹了CSS實(shí)現(xiàn)菜單箭頭動畫效果，具有一定的參考價(jià)值，感興趣的可以了解一下
先上效果圖：
其實(shí)是很簡單的一個(gè)效果
思路：箭頭圖標(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時(shí)給偽元素添加動畫實(shí)踐下來是不可以的。
個(gè)人理解是因?yàn)閭卧夭⒉徽鎸?shí)存在
其實(shí)主要的核心就是懸停一個(gè)元素li的時(shí)候給另一個(gè)元素添加動畫，注意css部分核心代碼的寫法，給箭頭圖標(biāo)加懸停css是針對圖標(biāo)的，而這個(gè)寫法意思就是懸停li標(biāo)簽時(shí)li中的arrow圖標(biāo)添加動畫，從而實(shí)現(xiàn)懸停一個(gè)元素li的時(shí)候給另一個(gè)元素添加動畫。
到此這篇關(guān)于CSS實(shí)現(xiàn)菜單箭頭動畫效果的文章就介紹到這了,更多相關(guān)CSS 菜單箭頭動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
基于CSS實(shí)現(xiàn)帶陰影和小箭頭的黑色風(fēng)格下拉菜單效果
這篇文章主要為大家介紹了基于CSS實(shí)現(xiàn)帶陰影和小箭頭的黑色風(fēng)格下拉菜單效果,涉及使用css響應(yīng)hover樣式實(shí)現(xiàn)下拉菜單效果的相關(guān)技巧,界面美觀大方,具有一定參考借鑒價(jià)值,需2015-09-10