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

本文共 1737 字,大约阅读时间需要 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 样式代码如下:

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请求-跨项目调用接口的工具类

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月24日 05时07分53秒

关于作者

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

推荐文章

下列不属于java语言特点的是_下列选项中,不属于Java语言特点的一项是( )。... 2019-04-21
java中小数的乘法_javascript的小数点乘法除法实例 2019-04-21
kappa一致性检验教程_SPSS在线_SPSSAU_Kappa一致性检验 2019-04-21
linux shell mysql备份_linux shell 备份mysql 数据库 2019-04-21
Java双向链表时间复杂度_链表是什么?有多少种链表?时间复杂度是? 2019-04-21
unity3d能和java系统整合吗_Android与Unity3d的整合 2019-04-21
minecraft666java_我的世界的666的世界 2019-04-21
辽宁师范大学java_辽宁师范大学心理学院 2019-04-21
java程序有连接数据库_Java程序连接数据库 2019-04-21
java reduce.mdn_reduce高级用法 2019-04-21
java shape用法_Java PShape.scale方法代码示例 2019-04-21
java字符串三目_java字符串连接运算符和三目运算符 2019-04-21
java 堆内存 非堆内存_JVM 堆内存和非堆内存 2019-04-21
Java新手写什么demo_通过入门demo简单了解netty使用方法 2019-04-21
java国际化bundle_java语言国际化--ResouceBundle、struts 2019-04-21
java图片延迟加载_jQuery实现图片延迟加载 2019-04-21
java开发加入购物车功能_java web开发——购物车功能实现 2019-04-21
Java虚拟机不能满足_深入理解Java虚拟机--读书笔记1/3 2019-04-21
python 协程 asyncio_python – asyncio.as_completed是否会产生期货或协同程序? 2019-04-21
java设定xml文件的encoding_配置web-xml解决中文乱码问题,及各种乱码问题集结 2019-04-21