css动画03--伸缩式导航栏/手机原子组件
介绍
当点击错号和菜单双横线是不同的动画展示，以上是鄙人自己录制的一个小视频，希望大家做一个参考
代码
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>HTML+CSS伸缩式导航栏</title> <link rel="stylesheet" href="./css/3.css"> </head> <body> <div class="navbar"> <input type="checkbox"> <span></span> <span></span> <ul> <li><a href="javascript:void(0)">首页</a></li> <li><a href="javascript:void(0)">咨询</a></li> <li><a href="javascript:void(0)">收藏</a></li> <li><a href="javascript:void(0)">购物车</a></li> <li><a href="javascript:void(0)">我的</a></li> </ul> </div> </body> </html>
CSS
*{ margin:0; padding:0; } body{ height: 100vh; /* 背景渐变 */ background: linear-gradient(200deg,#ddd6f3,#faaca8); } /* 三个元素都需要弹性布局，所以写在一块 */ body,.navbar,.navbar ul{ display: flex; justify-content: center; align-items: center; } .navbar{ position: relative; padding: 20px; background-color: #fff; border-radius: 50px; } .navbar input{ width: 40px; height: 40px; /* 这里我们把复选框不透明度设置为0，直接变透明 */ opacity: 0; /* 鼠标变小手 */ cursor: pointer; } .navbar span{ position: absolute; left:25px; width: 30px; height: 4px; /* 现在将两条线放到一起，然后单独设置第二条线的位置，calc方法可以自动计算数值 */ top: calc(50% - 10px); border-radius: 15px; background-color: #999; /* 现在span覆盖着复选框，鼠标放到span上是点不中复选框的，下面这个属性就可以解决这个问题，即便鼠标放到span上点击也能选中或取消选中复选框 */ pointer-events: none; /* 收回来的时候过渡刚好是相反的 */ transition: transform 0.3s ease-in-out,top 0.3s ease-in-out 0.3s; /* 现在过渡效果有点快，有点生硬 */ } /* 因为第二条线在navbar这个元素内的第三个位置，所以这里写3 */ .navbar span:nth-child(3){ top: calc(50% + 6px); } .navbar ul{ width: 0; /* 溢出隐藏 */ overflow: hidden; /* 在这里加个过渡，可以让展开和收起自然一些 */ transition: all 0.5s; /* 大家应该也发现了，现在导航栏收起的时候，这个圆是扁的 */ /* 这个问题是因为文字被换行显示了，两个汉字竖着排列了，所以盒子被撑大了，下面这个属性就可以解决这个问题，让文字不换行显示 */ white-space: nowrap; } .navbar ul li{ list-style: none; margin: 0px 15px; } .navbar ul li a{ text-decoration: none; font-size: 20px; font-weight: 700; color:#333; } .navbar ul li a:hover{ color:#fb7299; } /* :checked是当复选框被选中的时候，~这个是兄弟选择器，查找同一级的ul */ .navbar input:checked ~ ul{ width: 350px; } .navbar input:checked ~ span:nth-child(2){ top: calc(50% - 2px); transform: rotate(-45deg); background-color: #fb7299; /* 这里先执行top，然后0.3秒后执行transform */ transition: top 0.3s ease-in-out,transform 0.3s ease-in-out 0.3s; } .navbar input:checked ~ span:nth-child(3){ top: calc(50% - 2px); transform: rotate(45deg); background-color: #fb7299; transition: top 0.3s ease-in-out,transform 0.3s ease-in-out 0.3s; }
