css+svg实现可伸缩弹出子菜单效果代码-html代码-BFW代码库

css+svg实现可伸缩弹出子菜单效果代码

代码语言：html

代码描述：css+svg实现可伸缩弹出子菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");

* {
        margin: 0;
        padding: 0;
}
body {
        font-family: sans-serif;
        background: #2f2e34;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: "Inter", sans-serif;
}

button {
        background: none;
        border: none;
}

#button-container button svg {
        transition: transform 1s ease;
}

#button-container,
#button-container span,
#button-container button {
        display: flex;
        white-space: nowrap;
        gap: 1px;
        align-items: center;
        cursor: pointer;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        color: #c7c7c7;
}

#button-container {
        color: #c7c7c7;
        height: 40px;
        background: rgba(255, 255, 255, 0.03);
        width: 300px;
        border: 2px solid #a5a5a5;
        border-radius: 12px;
        padding: 0px 16px;
        overflow: hidden;
        transition: width 1s ease;
        cursor: pointer;
}

#button-container > svg,
#button-container span {
        border-left: 2px solid rgba(255, 255, 255, 0.1);
        padding: 5px;
        height: 100%;
}

#button-container.minimized {
        width: 77px;
}

#button-container.minimized > svg,
#button-container.minimized span {
        display: none;
}

#button-container.minimized button svg {
        transform: rotate(180deg);
}

#button-container:hover {
        transform: scale(1.1);
}
</style>


  
  
</head>

<body>
  <div id="button-container" class="minimized">
        <button type="button" onclick="toggleMinimize()">Contacts
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#C7C7C7" />
        </button>

        <span></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-r.........完整代码请登录后点击上方下载按钮下载查看