css实现列表菜单鼠标悬浮扇形分散散开动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现列表菜单鼠标悬浮扇形分散散开动画效果代码
代码标签: css 列表 菜单 鼠标 悬浮 扇形 分散 散开 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.easings.css"> <style> @layer demo { ul { --radius: 0; --middle: calc(calc(var(--sibling-count) + 1) / 2); > li { --angle: calc((var(--sibling-index) - var(--middle)) * var(--radius)); transform: rotateZ(var(--angle)); transform-origin: -200% 50%; @media (prefers-reduced-motion: no-preference) { transition: transform .3s var(--ease-elastic-out-4); } } &:hover li { --radius: 4deg; } } } @layer demo.support { * { box-sizing: border-box; margin: 0; } html { block-size: 100%; color-scheme: dark light;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0