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,
          linear-gradient(
            80deg,
            transparent 50%,
            skyblue 50% calc(50% + 0.25 * var(--elw)),
            transparent calc(50% + 0.25 * var(--elw))
          ) -20% top / 50% 100% no-repeat;
          opacity: 0.5;
          filter: drop-shadow(0 0 var(--elw) rgb(0 0 128 / 0.25)) brightness(1.25);
        }
        .center-details::after {
          content: "+";
          color: skyblue;
          margin: auto;
          font-size: calc(3 * var(--elw));
        }
        
        .red-text {
          left: 50%;
          transform: translateX(-50%);
          text-align: center;
          white-space: pre;
          display: block;
          font-size: calc(2 * var(--elw));
          font-family: monospace;
          color: red;
          text-decoration: none;
          opacity: 0.5;
          text-shadow: 0 0 var(--elw) maroon;
          font-weight: bold;
        }
        
        :root {
          --pxmaskimg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAABi0lEQVRIx+3UTW9SQRSA4WcucAENDbWKrRuSGhcmLvr/f4UbY+KCqIlG8IO2WL4uzHXB5UIjlLhywyxmMZk5c85535wgyoz09bz13hd3ml547cpL51pSAeTI5SAIrM4TBBWpphOnzjx15okTTalK+TgXLcxNTUzNZKIoJ4iWpm709Xw0MNHwTNelc6caKoJYPJ+Zi4JUXaomEYIolxm7MdB3ba6mraOj7VFRwFJmYmRkLFPVdKK1yjGI5YXfbo0tVDW11hcoPrg2MDA0k2rreL76IIh/pZiobVKkKPGbnk/6Juo6ui5daGuuApCLouWqMSoSlaLBuYU73332zgdfjTVceOWNro7HCQWYREWqrq6hpiopYJEXJd4a+umHX4ZGJjJL+TqAkvV6373WQcuVbHFeykxNzcwt1pwPebKrifc4l03c48k2xp2cS4x7PNmItIfzlkg7PdmovIfzDpXveRLEhzmrPexJcojzIU+SQ5wPefIv82CnJ8d5cJwHx3nwH+ZBVaquoVE2OPAH4PLAAI/m8L8AAAAASUVORK5CYII=);
          --dunesimg: url(data:image/gif;base64,R0lGODlhQAagAPIAAJWVlbCwsKOjo7y8vMXFxYaGhnBwcEdHRyH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwMzAyLCAyMDE3LzAzLzAyLTE2OjU5OjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTYuMCAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkIwNkM2OUE2RThCMTFFQ0EwQ0JFQjU1MTgwRTM0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkIwNkM2OUI2RThCMTFFQ0EwQ0JFQjU1MTgwRTM0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2QjA2QzY5ODZFOEIxMUVDQTBDQkVCNTUxODBFMzQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2QjA2QzY5OTZFOEIxMUVDQTBDQkVCNTUxODBFMzQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACwAAAAAQAagAAAD/yi6HP4jkknrhG3Zzbv/YIdBUmmG6DeubOs2J7m9dG3fuBynvJr/wKBwSCwaj0jd7jbLOB9PKCymWFpNSl8yd0pdr0UwENsSk4Xm9HbdmlKyJbZ8/e3Z76myes4/9/+AgYKDhERdInAXUol4jXc1dY6OcYFVTYWFkZJ2mJ2en6BcimijkKV6aY+MFqGHXnutjGOwfrK0sYGXuIOam755qLe7w8TFxsdbWixRbr/OwMGuz76ZiMik0tPQvLXX3t99KIkrrIsO1Lbm1dnKwrnbe/Hd6e7jlODs6vhMvdr+9/Tm7RtIsKBBJHmYmYpA7t8kWw6nsYkC72DAiOLoVLTIkf8jPF3S+GVcdWpdvnb1dslbGY3lyY2dmsHsePElxpk1GdLcybMnPpw/FMq0+ZCow5bWNKrymfMmTKMgmUo9dqooSZ0iQVp9B9UlVotekXb9F9PSUqpRs451elaswKlw48pVCjSg2pZu1z5TWzKZTX1zm7J9ezVp4MOttI66hNUw4bycuIVNSfdxNGwAJ+tFabKd0DmK6wrePNgyZcSoU6eeouSykM/qYJcWbfe1bNV+NX/FXZZ3T9ZBgBPUfZqP8KC3Xd/VjdC08lCj+0omfXT5buPJj8G2CCB77Nvbj/v+rtBy+PO3Z7e1nsT7eMzM38ufT1+l80ruvRXvnDnW8X7/0uWVG3VbCdhbfnOIR96CBSGI3oP1LaSLggxCSJ566xWTVoSV7cfhhyCGKOKA8HnYIVhjGXgfewRyBh1PFKK3k4UjhuMYDjSWd8FQGG5IjIs1shjkkEQWCRdAgHEl14poZdifiSW2+KSR+MU4kIM5YnmkjxR99VmASVKhQY9ANhdGmVQ2laZP163pJk/bW.........完整代码请登录后点击上方下载按钮下载查看