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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.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图片延迟加载_jQuery实现图片延迟加载
2019-04-21
java开发加入购物车功能_java web开发——购物车功能实现
2019-04-21
Java虚拟机不能满足_深入理解Java虚拟机--读书笔记1/3
2019-04-21