css实现悬浮菜单点击展开动画伸缩效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现悬浮菜单点击展开动画伸缩效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> * { /* 页面初始化 清除页面元素原有的内外边距 */ padding: 0; margin: 0; } body { height: 100vh; /* 背景渐变色 */ background: linear-gradient(#99f, #f99); } body, .navbar, .navbar ul { /* 三个元素都需要弹性布局 写一块 */ display: flex; justify-content: center; align-items: center; } .navbar { /* 相对定位 */ position: relative; padding: 20px; border-radius: 50px; background-color: #fff; } .navbar input { width: 40px; height: 40px; /* 鼠标移入变小手 */ cursor: pointer; /* 不透明度为0 直接变透明 */ opacity: 0; } .navbar span { /* 绝对定位 */ position: absolute; left: 25px; /* 现将两条线都放到一起 然后单独设置第二条线的位置 calc方法可以自动计算数值 */ top: calc(50% - 10px); width: 30px; height: 4px; 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这个元素内的第三个位.........完整代码请登录后点击上方下载按钮下载查看
网友评论0