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字体效果的设置方法小结
Jun 13 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
canvas环形倒计时组件的示例代码
Jun 14 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 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面向对象的方法重载两种版本比较
2008/09/08 PHP
php去除重复字的实现代码
2011/09/16 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP单例模式详细介绍
2015/07/01 PHP
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
python连接oracle数据库实例
2014/10/17 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python机器学习库常用汇总
2017/11/15 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Django学习之文件上传与下载
2019/10/06 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
Numpy 多维数据数组的实现
2020/06/18 Python
python em算法的实现
2020/10/03 Python
python中round函数保留两位小数的方法
2020/12/04 Python
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
大学班级文化建设方案
2014/05/06 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
第一军规观后感
2015/06/12 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记