CSS3模拟动画下拉菜单效果


Posted in HTML / CSS onApril 12, 2017

下拉菜单模拟效果图:

CSS3模拟动画下拉菜单效果

CSS3:

<style>
            #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
            #box:hover{height:250px;}
            #box ul{list-style:none; margin:0; padding:0;}
            #box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
        </style>

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>This's 1</li>
                <li>This's 2</li>
                <li>This's 3</li>
                <li>This's 4</li>
                <li>This's 5</li>
            </ul>
        </div>
    </body>
</html>

以上所述是小编给大家介绍的CSS3模拟动画下拉菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 #HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 #HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 #HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 #HTML / CSS
CSS3制作hover下划线动画
Mar 27 #HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 #HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
You might like
Zerg建筑一览
2020/03/14 星际争霸
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP实现简易图形计算器
2020/08/28 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
应用化学专业职业生涯规划书
2014/01/22 职场文书
运动会广播稿50字
2014/01/26 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
项目合作协议书
2014/09/23 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
坎儿井导游词
2015/02/09 职场文书
赞助商致辞
2015/07/30 职场文书
学校教学管理制度
2015/08/06 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
python可视化之颜色映射详解
2021/09/15 Python
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python