atroposjs实现鼠标悬浮跟随三维视觉差异图层效果代码
代码语言:html
所属分类:视觉差异
代码描述:atroposjs实现鼠标悬浮跟随三维视觉差异图层效果代码
代码标签: atroposjs 鼠标 悬浮 跟随 三维 视觉 差异 图层
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/atropos.min.css"> <style> /* Fluff */ *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: sans-serif; } .container { width: 100%; max-width: 800px; margin: auto; padding: 2rem; } /* Atropos web component */ atropos-component { display: block; } atropos-component .atropos-inner { border-radius: 1rem; } atropos-component img { position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; -o-object-fit: contain; object-fit: contain; display: block; z-index: 1; transform-style: preserve-3d; pointer-events: none; max-width: none; } atropos-component img.atropos-spacer { position: relative; width: 100%; height: auto; left: 0; top: 0; visibility: hidden; } atropos-component .atropos-button-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0.75); } atropos-component .atropos-button-wrap a { color: inherit; text-decoration: none; } atropos-component .atropos-shadow { filter: blur(50px); opacity: .25; } atropos-component .atropos-active .atropos-shadow { opacity: 1 !important; } </style> </head> <body> <div class="container"> <atropos-component> <!-- main Atropos container (required), add your custom class here --> <div class="atropos"> <!-- scale container (required) --> <div class="atropos-scale"> <!-- rotate container (required) --> <div class="atropos-rotate"> <!-- inner container (required) --> <div class="atropos-inner"> <!-- put .........完整代码请登录后点击上方下载按钮下载查看
网友评论0