css+svg实现悬浮弹出下拉图标菜单动画效果代码
代码语言: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-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0