svg+css实现模仿苹果mac电脑图标滚动伸缩进入动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:svg+css实现模仿苹果mac电脑图标滚动伸缩进入动画效果代码
代码标签: svg css 模仿 苹果 mac 电脑 图标 滚动 伸缩 进入 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> *, *:after, *:before { box-sizing: border-box; } h1 { margin: 0; position: fixed; bottom: 2rem; right: 2rem; font-weight: bold; } :root { --size: 48px; --show: 4; --gap: 1.5rem; --padding: 1rem; --width: calc(((var(--size) * var(--show)) + (var(--gap) * (var(--show) - 1)) + (2 * var(--padding))) * 1); } body { display: grid; place-items: center; min-height: 100vh; background: url('//repo.bfw.wiki/bfwrepo/image/5df86dc72ff0f.png'); background-size: cover; font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; } nav { background: hsl(330, 11%, 38%); margin: 0; width: var(--width); padding: 0; border-radius: calc(var(--size) * 0.5); overflow: hidden; } nav ul { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; display: flex; overflow: auto; padding: 0; gap: var(--gap); margin: 0; padding: var(--padding); list-style-type: none; scroll-padding: var(--padding); } nav li { scroll-snap-align: start; height: var(--size); aspect-ratio: 1; border-radius: 8px; background: linear-gradient(hsl(0 0% 100% / 0.1), transparent), hsl(var(--hue, 10) 70% 60%); box-shadow: 0 2px 0 0 hsl(0 0% 100% / 0.5) inset, 0 2px 0 0 hsl(0 0% 25% / 0.5); } @supports (animation-timeline: view()) { nav li { animation: scale both linear, scale both linear reverse; animation-timeline: view(inline); animation-range: entry, exit; } @-webkit-keyframes scale { 0% { scale: 0; } } @keyframes scale { 0% { scale: 0; } } } li:nth-of-type(1){--hue: 10;} li:nth-of-type(2){--hue: 210;} li:nth-of-type(3){--hue: 290;} li:nth-of-type(4){--hue: 340;} li:nth-of-type(5){--hue: 30;} li:nth-of-type(6){--hue: 220;} li:nth-of-type(7){--hue: 320;} li:nth-of-type(8){--hue: 280;} li:nth-of-type(9){--hue: 240;} li a { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; transition: all 0.2s; position: relative; } li svg { width: 70%; stroke: hsl(0 0% 98%); } </style> </head> <body> <h1>Scroll Inline.</h1> <nav class="blocks"> <ul> <li> <a href="#" class="block"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </a> </li> <li> <a href="#" class="block"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" /> </svg> </a> </li> <li> <a href="#" class="block"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" > <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 011.037-.443 48.282 48.282 0 005.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" /> </svg> </a> </li> <li> <a href="#" class="block"> <svg .........完整代码请登录后点击上方下载按钮下载查看
网友评论0