div+css模拟Apple Vision PRO的App UI交互效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css模拟Apple Vision PRO的App UI交互效果代码
代码标签: div css 模拟 Apple Vision PRO App UI 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } /* width */ ::-webkit-scrollbar { width: 8px; height: 8px; } /* Track */ ::-webkit-scrollbar-track { background: #0a0a0a; } /* Handle */ ::-webkit-scrollbar-thumb { background: #ad3955; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #ad3955; } html, body { height: 100%; width: 100%; } body { background: #191919; overflow: hidden; } .parallax { width: 100%; height: 100%; } .parallax img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } .parallax > img { filter: blur(2px); } .agumented-ui { position: absolute; left: 0; bottom: 4rem; width: 100%; height: 100%; display: grid; place-items: center; } .ui { width: 100%; max-width: 800px; display: flex; gap: 5rem; } .agumented-ui .sidebar { background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.25rem; border-radius: 3rem; box-shadow: 2px 2px 8px rgba(155, 155, 155), inset 2px 2px 8px rgba(255, 255, 255); width: 2.5rem; height: fit-content; margin: auto 0; } .agumented-ui .sidebar svg { width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; position: relative; z-index: 2; margin: 0 auto; cursor: pointer; color: #555; } .agumented-ui .sidebar svg.selected { color: #fff; } .selector { position: absolute; top: 0.25rem; left: 0.25rem; width: 2rem; height: 2rem; background: rgba(135, 135, 135); box-shadow: 2px 2px 8px rgba(95, 95, 95), inset 2px 2px 8px rgba(175, 175, 175); border-radius: 50%; } .agumented-ui .icons { display: flex; flex-direction: column; gap: 3.5rem; } .agumented-ui .icons .row { display: flex; justify-content: center; gap: 3.5rem; } .agumented-ui .icons .row .app { width: 5rem; height: 5rem; border-radius: 50%; background: #ccc; box-shadow: 2px 2px 8px #777, inset 2px 2px 8px #eee; padding: 0.5rem; display: grid; place-items: center; cursor: pointer; } .agumented-ui .icons .row .app img { width: 3rem; height: 3rem; } .logo-wrapper { position: fixed; bottom: 1rem; right: 1rem; display: grid; place-items: center; opacity: 0; animation: fade-in 0.8s linear forwards; } @keyframes fade-in { to { opacity: 1; } } .logo { width: 3rem; height: auto; color: #fff; } .circle { position: absolute; width: 4rem; height: 4rem; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); stroke-dasharray: 52; stroke-dashoffset: 40; animation: rotate 3s linear infinite; filter: drop-shadow(0px 0px 6px #fff); } @keyframes rotate { from { transform: translate3d(-50%, -50%, 0) rotate(0deg); } to { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body > <main id="parallax" class="parallax"> <img src="//repo.bfw.wiki/bfwrepo/images/Vision/bg.jpg" /> <div class="agumented-ui"> <div class="ui"> <div class="sidebar"> <div class="selector"></div> <svg class="selected" xmlns="http://www.w3.org/2000/svg" width="95" height="84" fill="none" viewBox="0 0 95 84"> <path fill="none" fill-rule="evenodd" d="m58.651 27.556.024.04-.024-.04Zm.912 36.928-.002.005.004-.005h-.002Z" clip-rule="evenodd" /> <path fill="currentColor" d="M0 58.584c0 3.242 2.653 5.9 5.9 5.9h53.663c2.592-4.81-.745-11.796-6.7-11.796h-18.32l25.31-43.842c1.624-2.8.68-6.43-2.152-8.053-2.8-1.624-6.43-.68-8.053 2.153l-2.624 4.54-2.625-4.54C42.78.146 39.18-.831 36.346.793c-2.799 1.62-3.776 5.22-2.152 8.053l6.046 10.441-19.29 33.396H5.9c-3.242 0-5.9 2.658-5.9 5.9Zm18.588 21.798c-1.623 2.832-5.253 3.776-8.052 2.152-2.832-1.623-3.777-5.253-2.153-8.052l4.22-7.288c4.749-1.445 8.643-.326 11.683 3.36l-5.698 9.828Z" /> <path fill="currentColor" fill-rule="evenodd" d="M59.565 64.484h-.002l-.002.005.004-.005Z" clip-rule="evenodd" /> <path fill="currentColor" d="M88.506 64.484h-8.558l5.782 10.002c1.624 2.832.647 6.434-2.152 8.053-2.833 1.624-6.434.647-8.053-2.152-4.276-7.396-8.077.........完整代码请登录后点击上方下载按钮下载查看
网友评论0