css+svg实现悬浮弹出下拉图标菜单动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现悬浮弹出下拉图标菜单动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        body{background:linear-gradient(78deg,rgba(96,96,96,0.04) 0,rgba(96,96,96,0.04) 35%,rgba(220,220,220,0.04) 35%,rgba(220,220,220,0.04) 100%),linear-gradient(150deg,rgba(83,83,83,0.04) 0,rgba(83,83,83,0.04) 71%,rgba(6,6,6,0.04) 71%,rgba(6,6,6,0.04) 100%),linear-gradient(311deg,rgba(203,203,203,0.04) 0,rgba(203,203,203,0.04) 58%,rgba(3,3,3,0.04) 58%,rgba(3,3,3,0.04) 100%),linear-gradient(137deg,rgba(110,110,110,0.04) 0,rgba(110,110,110,0.04) 11%,rgba(226,226,226,0.04) 11%,rgba(226,226,226,0.04) 100%),linear-gradient(90deg,#d71354,#ea777b)}
     .speed-dial:hover .speed-dial__button--root,.speed-dial__button--root:hover{background-color:#0051a1}.speed-dial:hover .speed-dial__button--root svg,.speed-dial__button--root:hover svg{transform:rotate(45deg)}*{box-sizing:border-box;padding:0;margin:0}body,html{height:100%}body{display:flex;justify-content:center;align-items:center}.speed-dial{position:relative}.speed-dial .flex-center{display:flex;justify-content:center;align-items:center}.speed-dial button{cursor:pointer;border:0}.speed-dial [data-direction]{position:absolute;display:flex;visibility:hidden}.speed-dial [data-direction=top]{bottom:56px;width:56px;flex-direction:column}.speed-dial [data-direction=top] .speed-dial__button--small{margin-bottom:15px}.speed-dial [data-direction=bottom]{top:56px;width:56px;flex-direction:column-reverse}.speed-dial [data-direction=bottom] .speed-dial__button--small{margin-top:15px}.speed-dial [data-direction=left]{top:0;right:56px;height:56px;flex-direction:row}.speed-dial [data-direction=left] .speed-dial__button--small{margin-right:15px}.speed-dial [data-direction=right]{top:0;left:56px;height:56px;flex-direction:row-reverse}.speed-dial [data-direction=right] .speed-dial__button--small{margin-left:15px}.speed-dial .icon{transition:all .1s ease-in-out;width:25px;height:25px;fill:#464646}.speed-dial .icon__plus{width:24px;height:24px;fill:#fff}.speed-dial__item{position:relative;transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms,opacity .8s;opacity:0;transform:scale(0)}.speed-dial:hover [data-direction]{visibility:visible}.speed-dial:hover [data-direction=bottom] span,.speed-dial:hover [data-direction=top] span{right:60px}.speed-dial:hover [data-direction=left] span,.speed-dial:hover [data-direction=right] span{top:-20px}.speed-dial:hover .speed-dial__item{opacity:1;transform:scale(1)}.speed-dial__button--small{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);width:40px;height:40px;border-radius:50%;background-color:#fff;transition:all .5s}.speed-dial__button--small:hover{background-color:#ddd}.speed-dial__button--small:hover span{display:block}.speed-dial span{display:none;position:absolute;padding:5px;color:#fff;font-size:11px;background-color:#464646;border-radius:5px}.speed-dial__button--root{width:56px;height:56px;border-radius:50%;background-color:#1976d2;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}
    </style>
</head>

<body><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="lightning" viewBox="0 0 32 32"><path d="M12 24l2 2-2 6 6-6-2-2 2-4-6 4zM32 8.427c0-3.072-2.5-5.57-5.573-5.57-.15 0-.298.005-.447.017C24.535 1.072 22.356 0 20 0c-2.355 0-4.535 1.072-5.98 2.874-.148-.012-.298-.017-.449-.017-3.07 0-5.57 2.499-5.57 5.57 0 .322.043.633.094.94-.034.044-.074.085-.107.13-.327-.047-.655-.07-.987-.07-3.859 0-7 3.141-7 7s3.141 7 7 7c.856 0 1.693-.156 2.482-.458.069.06.151.102.221.16l1.77-1.18c-.59-.418-1.141-.883-1.602-1.438-.813.572-1.801.915-2.871.915-2.762 0-5-2.237-5-5 0-2.76 2.238-5 5-5 .676 0 1.316.138 1.902.38.035-.068.078-.125.113-.19.352-.642.785-1.229 1.292-1.753 1.443-1.493 3.448-2.438 5.693-2.438 3.107 0 5.771 1.792 7.096 4.3.........完整代码请登录后点击上方下载按钮下载查看