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-13.984-11.408-19.757l-.007-.011a7940.194 7940.194 0 0 0-10.417-18.023c-4.928-8.558-1.416-17.111 2.096-20l2.858 4.953.004.008.024.04 1.407 2.44a26119.19 26119.19 0 0 0 13.083 22.651h15.34c3.248 0 5.901 2.657 5.901 5.9a5.896 5.896 0 0 1-5.9 5.896Z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="88" height="95" fill="none" viewBox="0 0 88 95"> <path fill="currentColor" d="M81.877 58.443 71.72 51.872l3.91-7.09a12.238 12.238 0 0 0 1.44-5.74V27.804a16.091 16.091 0 0 0-2.663-8.9 16.362 16.362 0 0 0-7.162-6 16.58 16.58 0 0 0-9.317-1.136 16.483 16.483 0 0 0-8.422 4.1v65.628h37.668V68.15a11.456 11.456 0 0 0-1.402-5.519 11.61 11.61 0 0 0-3.895-4.188Z" /> <path fill="currentColor" d="m63.737 63.294-13.555-8.87 5.219-9.568a16.668 16.668 0 0 0 1.922-7.75V21.939A21.955 21.955 0 0 0 35.402 0c-12.076 0-21.9 9.842-21.9 21.938v15.169c-.012 2.7.64 5.36 1.9 7.747l5.247 9.62-13.476 8.82A15.595 15.595 0 0 0 .105 76.376L0 94.41h70.806V76.396a15.602 15.602 0 0 0-7.069-13.102Z" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="95" height="91" fill="none" viewBox="0 0 95 91"> <path fill="currentColor" d="M94.41 66.475 65.838 37.903l11.955-11.955L94.41 42.563v23.912ZM0 52.431l34.378-34.377L94.41 78.086v11.955H0v-37.61Z" /> <circle cx="58.035" cy="9.224" r="9.224" fill="currentColor" /> </svg> </div> <div class="icons"> <div class="row"> <div class="app"> <a href="/" target="_blank"> <img alt="notes" src="//repo.bfw.wiki/bfwrepo/images/Vision/notes.png"></img> </a> </div> <div class="app"> <a href="/" target="_blank"> <img alt="store" src="//repo.bfw.wiki/bfwrepo/images/Vision/app-store.png"></img> </a> </div> </div> <div class=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0