augmented-ui模拟实现高科技数码望远镜动画效果代码-html代码-BFW代码库

augmented-ui模拟实现高科技数码望远镜动画效果代码

代码语言：html

所属分类：动画

代码描述：augmented-ui模拟实现高科技数码望远镜动画效果代码

下面为部分代码预览，完整代码请点击下载或在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>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        html, body { min-height: 100vh; }
        
        body {
          display: grid;
          background: #000;
        }
        
        .star-wars-binoculars {
          margin: auto;
          border: 1px solid black;
          aspect-ratio: 2 / 1;
          position: relative;
          --elw: calc(95vw / 100);
          width: calc(100 * var(--elw));
          background: black;
        }
        
        .star-wars-binoculars > * {
          position: absolute;
        }
        
        @property --bob { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
        @keyframes --bob {
          0% { --bob: -10% } 33.33% { --bob: 0% } 66.667% { --bob: 10% } 100% { --bob: 0% }
        }
        @property --pan { syntax: "<number>"; initial-value: 0; inherits: false; }
        @keyframes --pan {
          0% { --pan: -0.5 } 33.33% { --pan: 0 } 66.667% { --pan: 0.5 } 100% { --pan: 0 }
        }
        :root {
          --ybob: --bob 5s ease-in-out infinite alternate;
          --xpan: --pan 60s ease-out infinite alternate;
        }
        .star-wars-binoculars .viewport {
          inset: 5%;
          --tint: linear-gradient(rgb(128 198 255 / 0.25), rgb(128 198 255 / 0.3));
          --ydunes: calc(50% + var(--bob) * 2);
          --xdunes: calc(50% + var(--pan) * 100%);
          background: var(--tint),
            var(--dunesimg) var(--xdunes) var(--ydunes) / auto 120% no-repeat;
          animation: var(--ybob), var(--xpan);
          --bs: inset 0 0 calc(var(--elw)) black;
          box-shadow: var(--bs), var(--bs), var(--bs), var(--bs);
        }
        
        @media (prefers-reduced-motion) {
          .star-wars-binoculars .viewport { animation: var(--xpan); }
        }
        
        .star-wars-binoculars .viewport::after {
          content: "";
          position: absolute;
          inset: 0;
          --pxmasksize: var(--elw);
          background: var(--pxmaskimg) 0 0 / var(--pxmasksize) var(--p.........完整代码请登录后点击上方下载按钮下载查看