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

代码语言：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 {
          inset: 5%;
          filter: blur(calc(0.125 * var(--elw)));
        }
        .star-wars-binoculars .also-tracking::before,
        .star-wars-binoculars .also-tracking::after {
          content: "";
          position: absolute;
          top: 7%;
          height: 3%;
          --mask: repeating-linear-gradient(
            to right,
            black 0px calc(0.5 * var(--elw)),
            transparent calc(0.5 * var(--elw)) calc(1.25 * var(--elw))
          );
          -webkit-mask: var(--mask);
          mask: var(--mask);
          width: 20%;
          filter: brightness(1.25) drop-shadow(0 0 var(--elw) blue);
        }
        .star-wars-binoculars .also-tracking::before {
          left: 5%;
          animation: var(--ybob);
          background: radial-gradient(
            circle at calc(50% - var(--bob) * 1.5),
            skyblue,
            rgb(128 198 255 / 0.25) calc(4 * var(--elw))
          );
        }
        .star-wars-binoculars .also-tracking::after {
          right: 5%;
          animation: var(--xpan);
          background: linear-gradient(
            to right,
            skyblue calc(90% * (var(--pan) + 0.5)),
            rgb(128 198 255 / 0.25) calc(95% * (var(--pan) + 0.5))
          );
        }
        
        .star-wars-binoculars .outline {
          --degradation: 1.5 * var(--elw);
          --aug-border: initial;
          --aug-border-all: calc(0.5 * var(--elw));
          --aug-border-bg: skyblue;
          filter: blur(calc(0.15 * var(--elw)));
        }
        
        .star-wars-binoculars .boundary-blackout {
          --degradation: 0px;
          --aug-border: initial;
          --aug-border-all: calc(0.5 * var(--elw));
          --aug-border-bg: black;
          clip-path: initial;
          filter: blur(calc(0.5 * var(--elw)));
        }
        
        .star-wars-binoculars [data-augmented-ui] {
          inset: calc(5% + var(--degradation)) calc(5% + var(--degradation));
          --aug-scoop-b1: initial;
          --aug-scoop-b2: initial;
          --aug-b-extend1: (25% + var(--degradation) * 2);
          --aug-b1: (10% + var(--degradation) / 2);
          --aug-b2: (10% + var(--degradation) / 2);
        
          --aug-round-tl1: initial;
          --aug-round-tr1: initial;
          --aug-round-br1: initial;
          --aug-round-bl1: initial;
          --aug-tl1: (7 * var(--elw) - var(--degradation));
          --aug-tr1: (7 * var(--elw) - var(--degradation));
          --aug-br1: (7 * var(--elw) - var(--degradation));
          --aug-bl1: (7 * var(--elw) - var(--degradation));
        
          --aug-clip-l1: initial;
          --aug-clip-l2: initial;
          --aug-l-extend1: (var(--elw) + var(--degradation));
          --aug-l1-width: (10% + var(--degradation) / 2);
          --aug-l2-width: (10% + var(--degradation) / 2);
          --aug-l1-height: (3% + var(--degradation) / 3);
          --aug-l2-height: (3% + var(--degradation) / 3);
          --aug-l-center: (20 * var(--elw) - var(--degradation));
        
          --aug-clip-r1: initial;
          --aug-clip-r2: initial;
          --aug-r-extend1: (var(--elw) + var(--degradation));
          --aug-r1-width: (10% + var(--degradation) / 2);
          --aug-r2-width: (10% + var(--degradation) / 2);
          --aug-r1-height: (3% + var(--degradation) / 3);
          --aug-r2-height: (3% + var(--degradation) / 3);
          --aug-r-center: (20 * var(--elw) - var(--degradation));
        }
        
        .center-details {
          display: grid;
          left: 30%;
          right: 30%;
          top: calc(5% + var(--elw) * 2.25);
          bottom: calc(15% + var(--elw) * 1.75);
          background: linear-gradient(
            100deg,
            transparent 50%,
            skyblue 50% calc(50% + 0.25 * var(--elw)),
            transparent calc(50% + 0.25 * var(--elw))
          ) 120% top / 50% 100% no-repeat,
          li.........完整代码请登录后点击上方下载按钮下载查看