html+css实现菜单栏缓慢下拉效果
发布日期:2022-02-24 01:06:50 浏览次数:2 分类:技术文章

本文共 1669 字,大约阅读时间需要 5 分钟。

利用html+css实现菜单栏缓慢下拉效果


目标:利用html+css实现鼠标移到菜单栏时,菜单栏会缓慢出现的效果

我们可以用两种方法来解决这个问题

方法一:过渡(transition)

  • 对forum-1开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden, 设置高度为0, 鼠标移入后再设置相应的高度即可

    .code .forum-1{
    
       /* 开启绝对定位 */  position: absolute;  overflow: hidden;  height: 0;  transition-duration: 0.5s;}
  • html 代码如下:

   
      
    
       
     
        
      
         
       
          
        
           
         菜单栏缓慢下拉  
         
          
  • 博客

  • 论坛
      
  • css

  • vue
  • python

  •   

  • 直播
  •   

    css 样式代码如下:

    a{
    
     display: block;  text-decoration: none;  color: #333;}.code{
     width: 390px;  height: 50px;  line-height: 50px;  background-color:#bfa;  margin: 5px auto;}.code li{
     float: left;  width: 130px;  height: 50px;  background-color: #bfa;  text-align: center;  margin: 0 auto;  font-size: 20px;}.code > li:last-child{
     margin-right: 0;}.code > li:hover{
     background-color: #f8f192;}.forum{
     position: relative;  margin: auto 90px;}.code .forum-1{
     /* 开启绝对定位 */  position: absolute;  overflow: hidden;  height: 0;  transition-duration: 0.5s;}.forum:hover .forum-1{
     /* 鼠标移入释放高度 */  height: 150px;}

    试了很多次发现,transition是不支持display属性的,也就是说,不能用display:none隐藏菜单栏


    方法二:动画(animation)

    • 首先创建css动画:

      @keyframes frames{
      
         from{
       height: 0px;  }  to{
       height: 150px;  }}
    • 然后设置display:none隐藏菜单样式,把它绑定到forum-1选择器中,用animation绑定动画名字,设置持续时间

      .forum-1{
      
         position: absolute;  display: none;  overflow: hidden;  /* 绑定动画名字并且设置持续时间 */  animation-name: frames;  animation-duration: 0.5s;}
    • 当鼠标移入时,设置display属性为block即可

      .forum:hover .forum-1{
      
         display: block;}
    • 需要注意的一点是,这样写的结果会出现一个问题:当鼠标移入不久后二级菜单栏会自动收回,为了避免这种问题,我们可以在forum-1选择器内部添加一行代码即可:

      .forum-1{
      
       
      animation-fill-mode: forwards;}

    其余代码和方法一的代码相同,这里不再赘述


    • 效果图如下:

    在这里插入图片描述

    转载地址:https://blog.csdn.net/weixin_45877762/article/details/115030046 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

    上一篇:update
    下一篇:RestTemplate模拟HTTP请求-跨项目调用接口的工具类

    发表评论

    最新留言

    留言是一种美德,欢迎回访!
    [***.191.171.22]2022年06月15日 12时51分11秒

    关于作者

        喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
    -- 愿君每日到此一游!

    最新文章

    力扣题904水果成篮 2019-12-30 11:47:52
    Redis入门(三) 2019-12-30 11:47:53
    Git入门 2019-12-30 11:47:50
    Git和GitHub 2019-12-30 11:47:51
    力扣题621任务调度器 2019-12-30 11:47:51
    力扣题617合并二叉树 2019-12-30 11:47:51
    力扣题647回文子串 2019-12-30 11:47:51
    Redis入门(一) 2019-12-30 11:47:51
    力扣题461汉明距离 2019-12-30 11:47:49
    力扣题494目标和 2019-12-30 11:47:49
    力扣题538把二叉搜索树转换为累加树 2019-12-30 11:47:50
    力扣题560和为k的子数组 2019-12-30 11:47:50
    力扣题543二叉树的直径 2019-12-30 11:47:50
    力扣题581最短无序连续子数组 2019-12-30 11:47:50
    力扣题825适龄的朋友 2019-12-30 11:47:48
    力扣题399除法求值 2019-12-30 11:47:48
    力扣题416分割等和子集 2019-12-30 11:47:48
    力扣题406根据身高重建队列 2019-12-30 11:47:48
    力扣题437路径总和III 2019-12-30 11:47:49
    力扣题448找到所有数组中消失的数字 2019-12-30 11:47:49