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(--pxmasksize);
          opacity: 0.5;
          backdrop-filter: contrast(1.5) brightness(1.5);
        }
        
        .star-wars-binoculars .tracking {
          bottom: calc(5% + var(--elw));
          height: calc(3.5 * var(--elw));
          overflow: hidden;
          width: 30%;
          left: 35%;
          z-index: 5;
          font-weight: bold;
          font-size: calc(2.5 * var(--elw));
          font-family: monospace;
          background: radial-gradient(
            circle at center,
            white 1px,
            orange,
            brown 40%,
            black 75%
          );
          opacity: 0.85;
          filter: saturate(0.5);
        }
        .star-wars-binoculars .tracking::after {
          content: "950•1975•0000•0025•0050•0075•0100•0125•0150•0175•0200•0225•0250•0275•0300•0325•0350•0375•0400•0425•0450•0475•0500•0525•0550•0575•0600•0625•0650•0675•0700•0725•0750•0775•0800•0825•0850•0875•0900•0925•0950•0975•1000•1025•1050•1075•1100•1125•1150•1175•1200•1225•1250•1275•1300•1325•1350•1375•1400•1425•1450•1475•1500•1525•1550•1575•1600•1625•1650•1675•1700•1725•1750•1775•1800•1825•1850•1875•1900•1925•1950•1975•0000•0025•005";
          position: absolute;
          inset: 0;
          padding-top: calc(0.1 * var(--elw));
          white-space: nowrap;
          color: white;
          background: black;
          mix-blend-mode: darken;
          animation: var(--xpan);
          margin-left: calc((var(--pan) + 0.5) * -530 * var(--elw));
        }
        
        .star-wars-binoculars .also-tracking {
         .........完整代码请登录后点击上方下载按钮下载查看