augmented-ui+vanilla-tilt实现科技瞄准镜悬浮交互动画效果代码-html代码-BFW代码库

augmented-ui+vanilla-tilt实现科技瞄准镜悬浮交互动画效果代码

代码语言：html

所属分类：悬停

代码描述：augmented-ui+vanilla-tilt实现科技瞄准镜悬浮交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/augmented-ui.2.0.css">
    <style>
        body { background: black; overflow: hidden; }
        
        body > [data-tilt] {
          position: relative;
          display: inline-block;
          padding: 75px;
          transform-style: preserve-3d;
          transform: perspective(1000px);
        }
        
        .reticle {
          --aug-all-width: 250px;
          color: #00bfff;
          --reticle-color: currentColor;
          --reticle-size: calc(var(--aug-all-width) * 0.25);
          --aug-border-bg: radial-gradient(
            circle at top center,
            var(--reticle-color) var(--reticle-size),
            transparent var(--reticle-size)
          ), radial-gradient(
            circle at bottom 13.92% right 6.89%,
            var(--reticle-color) var(--reticle-size),
            transparent var(--reticle-size)
          ), radial-gradient(
            circle at bottom 13.92% left 6.89%,
            var(--reticle-color) var(--reticle-size),
            transparent v.........完整代码请登录后点击上方下载按钮下载查看