CSS3+jquery导航菜单动画特效

 时间:2025-01-25 01:57:05

1、新建html文档。

CSS3+jquery导航菜单动画特效

2、初始化html标签样式。<style>html, body { padding: 0px; margin: 0px; font-family: 'Raleway', sans-serif; color: #FFF; height: 100%; }body { background: rgba(0, 0, 0, 0.5); }</style>

CSS3+jquery导航菜单动画特效

3、书写css样式。<style>.container { max-width: 200px; background: rgba(0, 0, 0, 0.75); margin: 40px auto; padding: 10px 0px 20px 0px; border: 1px solid #111; border-radius: 4px; box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.75); }.link { font-size: 16px; font-weight: 300; text-align: center; position: relative; height: 40px; line-height: 40px; margin-top: 10px; overflow: hidden; width: 90%; margin-left: 5%; cursor: pointer; }.link:after { content: ''; position: absolute; width: 80%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); bottom: 50%; left: -100%; transition-delay: all 0.5s; transition: all 0.5s; }.link:hover:after, .link.hover:after { left: 100%; }.link .text { text-shadow: 0px -40px 0px rgba(255, 255, 255, 1); transition: all 0.75s; transform: translateY(100%) translateZ(0); transition-delay: all 0.25s; }.link:hover .text, .link.hover .text { text-shadow: 0px -40px 0px rgba(255, 255, 255, 0); transform: translateY(0%) translateZ(0) scale(1.1); font-weight: 600; }</style>

CSS3+jquery导航菜单动画特效

4、书写html文档。<div class="container"><div class="link"> <div class="text">首页</div></div><div class="link"> <div class="text">关于我们</div></div><div class="link"> <div class="text">产品中心</div></div><div class="link"> <div class="text">项目案例</div></div><div class="link"> <div class="text">人才招聘</div></div><div class="link"> <div class="text">联系我们</div></div></div>

CSS3+jquery导航菜单动画特效

5、书写js特效。<script>var links = document.getElementsByClassName('link')for(var i = 0; i <= links.length; i++) addClass(i)function addClass(id){ setTimeout(function(){ if(id > 0) links[id-1].classList.remove('hover') links[id].classList.add('hover') }, id*750)}</script>

CSS3+jquery导航菜单动画特效

6、查看效果。

CSS3+jquery导航菜单动画特效
  • html+css3+jquery带图片的导航下拉特效
  • html+css3+jquery右侧弹出侧边栏导航菜单
  • html+css3+jquery无限级导航下拉菜单
  • html+css3+jquery垂直渐隐显示多级下拉特效
  • html+css3+jquery兼容手机的全屏导航下拉特效
  • 热门搜索
    新奇的近义词是什么 眼睛干涩是什么原因 扑朔迷离什么意思 tips是什么意思 违和感是什么意思 朱元璋属什么生肖 found是什么意思 buyer是什么意思 三个水是什么字 gpa是什么