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>
        html {
          font-size: 1rem;
          background-color: #0e141b;
        background-image: linear-gradient(270deg, #111 0%, #0e141b 74%);
          font-family: "Jetbrains Mono", -apple-system, BlinkMacSystemFont, Segoe UI,
            Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
        }
        
        .reticle {
          --aug-all-width: 10rem;
          --aug-border-all: 0.15rem;
          color: orange;
          --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 var(--reticle-size)
            );
          transform-origin: 50% 56%;
          transform: rotateZ(0deg);
          transition: transform 0.75s ease-out, color 0.75s ease-out;
          background: radial-gradient(
            circle at 50% 56%,
            var(--reticle-color) 0.25rem,
            transparent 0.25rem
          );
        }
        .reticle:hover {
          transform: rotateZ(180deg);
          color: red;
        }
        .goldthorn {
          --aug-all-width: 10rem;
          --aug-border-all: 0.5rem;
          --aug-border-bg: linear-gradient(to right, red, orange);
          background: linear-gradient(to left, #000, #222);
        }
        .news-list li {
          --aug-clip-tl1: initial;
          --aug-round-tr1: initial;
          --aug-clip-br1: initial;
          --aug-round-bl1: initial;
          --aug-border: initial;
          --aug-inlay: initial;
          --aug-border-all: 4px;
          --aug-inlay-all: 2px;
          --aug-border-bg: DarkGoldenRod;
          --aug-inlay-bg: #020202;
          --aug-inlay-opacity: 0.95;
          --aug-tl1: 40px;
          --aug-br1: 40px;
          --aug-tr1: 10px;
          --aug-bl1: 10px;
          color: #cccccc;
          text-align: center;
          padding: 1.5rem;
          width: 50%;
          max-width: 450px;
          font-size: 0.75rem;
          margin-bottom: 1rem;
        }
        
        .news {
          --aug-border: initial;
          --aug-inlay: initial;
          --aug-borde.........完整代码请登录后点击上方下载按钮下载查看