css实现悬浮菜单点击展开动画伸缩效果代码-html代码-BFW代码库

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这个元素内的第三个位.........完整代码请登录后点击上方下载按钮下载查看