jQuery鼠标悬停导航底部动画效果

作者 : 小刺猬 本文共322个字,预计阅读时间需要1分钟 发布时间: 2020-07-29 共70人阅读

jQuery鼠标悬停导航底部动画效果

效果背景:
偶然间在网上看到一个很有创意的导航效果,虽然效果不是很炫的那种,但也属于小清新了
于是自己模仿着写了一个,喜欢的童鞋可以拿去使用
实现原理:
主要使用jQuery的 hover 以及animate两个属性
默认每个li标签内带有一个span标签,固定在最底部,宽度为0
当鼠标悬停在li上时,内部的span标签从中间向两边扩大,时间设置为0.2秒
鼠标移走后,span宽度重新变为0
jQuery代码中有个 200数值,意为0.2秒,数值越大,速度越慢
使用方法:
1、将其中的css样式引入到你的网页中
2、将body中的代码部分拷贝到你需要的地方即可
VIP免费 永久VIP免费

已有0人支付


刺猬源码 » jQuery鼠标悬停导航底部动画效果

刺猬QQ交流群号多少?
363432

发表评论