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轻松实现圆角效果
Nov 09 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
Javascript 解疑
2009/11/11 Javascript
js DOM模型操作
2009/12/28 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Python素数检测实例分析
2015/06/15 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python人民币小写转大写辅助工具
2018/06/20 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
2014年社区庆元旦活动方案
2014/03/08 职场文书
美术指导求职信
2014/03/17 职场文书
企业务虚会发言材料
2014/10/20 职场文书
丧事答谢词大全
2015/09/30 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript