网页效果,显示主菜单,带你给用户鼠标移至主菜单时会产生下拉菜单,移开隐藏
以下为完整的代码和部分解释
整个父容器为300px,显示50px,鼠标移至主菜单则下拉250px
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XuCaiyunLet'sDoIt</title>
<style type="text/css">
body{
margin:0;
font-family:'微软雅黑','Times New Roman', Times, serif; //font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。
}
.navi_head{
height:50px;
background-color:#459df5;//持续显示的50px背景色为蓝色
}
.navi_body{
overflow:hidden; //显示navi_body的50px,其余全部剪去
height:50px;
background:rgba(36,97,158,0.9);
transition:height ease 0.5s;//transition属性:transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程