js startViewTransition实现明暗色调切换过渡动画切换代码-html代码-BFW代码库

代码语言：html
代码描述：js startViewTransition实现明暗色调切换过渡动画切换代码，一共7种过渡切换动画。
代码标签： js startViewTransition 明暗色调切换过渡动画切换代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css') layer(normalize);

@layer normalize, base, demo;

@font-face {
  font-family: 'Departure Mono';
  src: url('//repo.bfw.wiki/bfwrepo/font/DepartureMono-Regular.woff');
}

@layer demo {
  .content {
    padding: 0rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    align-items: flex-start;
    max-width: 50vw;
    align-self: flex-end;
  }

  a:not(.bear-link) {
    padding: 1rem 2rem;
    border-radius: 12px;
    color: var(--bg);
    -webkit-text-decoration-line: none;
            text-decoration-line: none;
    background: var(--color);
    font-weight: bold;
    transition: background 0.2s;
  }
  
  html {
    color-scheme: light dark;
  }
  
  [data-theme='light'] {
    color-scheme: light only;
  }
  [data-theme='dark'] {
    color-scheme: dark only;
  }

  [data-theme='dark'] a:is(:hover, :focus-visible) {
    background: hsl(0 0% 80%);
  }

  a:is(:hover, :focus-visible) {
    background: hsl(0 0% 50%);
  }

  .images {
    flex: 1;
  }

  footer {
    opacity: 0;
    padding: 1rem;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  :root {
    --color: hsl(0 0% 6%);
    --bg: hsl(0 0% 98%);
  }

  h1 {
    font-family: 'Departure Mono', monospace;
    font-size: clamp(2rem, 4vw + 1rem, 8rem);
    line-height: 1;
    font-weight: 300;
    margin: 0;
  }

  main {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 2rem;
    gap: 4rem;
    max-width: 100vw;
  }

  pre {
    max-width: 100%;
  }

  p {
    width: 60ch;
    max-width: 100%;
  }

  [data-theme='dark'] {
    --color: hsl(0 0% 98%);
    --bg: hsl(0 0% 6%);
  }

  .theme-toggle {
    color: var(--color);
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: transparent;
    transition: background 0.2s;
    cursor: pointer;
    z-index: 10;
  }

  .theme-toggle:is(:hover, :focus-visible) {
    background: color-mix(in hsl, canvas, canvasText 15%);
  }

  h1 {
    color: light-dark(hsl(10 90% 50%), hsl(25 84% 45%));
  }

  .images {
    width: 100%;
    height: 80vh;
    min-width: 200px;
  }
  img {
    max-width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    background: hsl(0 0% 50%);
    border-radius: 1rem;
    align-self: end;
    box-shadow: 0 0 2px white;
  }

  img:nth-of-type(2),
  [data-theme='dark'] img:nth-of-type(1),
  [data-theme='light'] img:nth-of-type(2) {
    display: none;
  }

  [data-theme='dark'] img:nth-of-type(2) {
    display: block;
  }

  .theme-toggle[aria-pressed='true'] svg path:last-of-type {
    display: block;
  }

  .theme-toggle svg {
    color: canvasText;
    width: 50%;
  }

  .theme-toggle[aria-pressed='true'] svg path:first-of-type,
  .theme-toggle svg path:last-of-type {
    display: none;
  }

  /* View Transitions */

  [data-style='wipe']::view-transition-group(root) {
    -webkit-animation-duration: 1.25s;
            animation-duration: 1.25s;
  }

  [data-style='wipe']::view-transition-new(root) {
    -webkit-animation-name: reveal-light;
            animation-name: reveal-light;
  }

  [data-style='wipe']::view-transition-old(root),
  [data-style='wipe'][data-theme='dark']::view-transition-old(root) {
    -webkit-animation: none;
            animation: none;
  }

  [data-style='wipe'][data-theme='dark']::view-transition-new(root) {
    -webkit-animation-name: reveal-dark;
            animation-name: reveal-dark;
  }

  @-webkit-keyframes reveal-dark {
    from {
      -webkit-clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
              clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
    }

    to {
      -webkit-clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
              clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
    }
  }

  @keyframes reveal-dark {
    from {
      -webkit-clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
              clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
    }

    to {
      -webkit-clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
              clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
    }
  }

  @-webkit-keyframes reveal-light {
    from {
      -webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
              clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
    }

    to {
      -webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
              clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
    }
  }

  @keyframes reveal-light {
    from {
      -webkit-clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
              clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
    }

    to {
      -webkit-clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
              clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
    }
  }

  /* Angled */
  [data-style='angled']::view-transition-old(root) {
    -webkit-animation: none;
            animation: none;
    z-index: -1;
  }

  [data-style='angled']::view-transition-new(root) {
    -webkit-animation: unclip 1s;
            animation: unclip 1s;
    -webkit-clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
            clip-path: polygon(-100vmax 100%, 100% 100%, 100% -100vmax);
  }

  @-webkit-keyframes unclip {
    0% {
      -webkit-clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
              clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
  }

  @keyframes unclip {
    0% {
      -webkit-clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
              clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
    }
  }

  /* Flip */

  [data-style='flip']:root {
    --size: 45px;
    --line: color-mix(in lch, white, transparent 85%);
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size),
      hsl(210 70% 34%);
  }

  [data-style='flip']::view-transition-new(body),
  [data-style='flip']::view-transition-old(body) {
    -webkit-animation: pan 1s ease-in-out;
            animation: pan 1s ease-in-out;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    box-shadow: 2.2px 61.3px 73.1px -2px hsl(0 0% 0% / 0.58);
  }

  [data-style='flip']::view-transition-new(body) {
    --sr: 180deg;
    background: canvas;
  }

  [data-style='flip']::view-transition-old(body) {
    --sr: 0deg;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  [data-style='flip'] body {
    view-transition-name: body;
  }

  @-webkit-keyframes pan {
    0% {
      transform: scale(1) rotateY(var(--sr));
    }

    25% {
      transform: scale(0.5) rotateY(var(--sr));
      box-shadow: 1.8px 50.7px 51.4px -3.2px hsl(0 0% 0% / 0.32);
    }

    75% {
      transform: scale(0.5) rotateY(calc(var(--sr) + 180deg));
      box-shadow: 1.8px 50.7px 51.4px -3.2px hsl(0 0% 0% / 0.32);
    }

    100% {
      transform: scale(1) rotateY(calc(var(--sr) + 180deg));
    }
  }

  @keyframes pan {
    0% {
      transform: scale(1) rotateY(var(--sr));
    }

    25% {
      transform: scale(0.5) rotateY(var(--sr));
      box-shadow: 1.8px 50.7px 51.4px -3.2px hsl(0 0% 0% / 0.32);
    }

    75% {
      transform: scale(0.5) rotateY(calc(var(--sr) + 180deg));
      box-shadow: 1.8px 50.7px 51.4px -3.2px hsl(0 0% 0% / 0.32);
    }

    100% {
      transform: scale(1) rotateY(calc(var(--sr) + 180deg));
    }
  }

  [data-style='flip']:root {
    view-transition-name: none;
  }

  [data-style='vertical']::view-transition-new(root) {
    -webkit-animation: reveal 1s;
            animation: reveal 1s;
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    z-index: 2;
  }

  [data-style='vertical']::view-transition-old(root) {
    z-index: -1;
    -webkit-animation: none;
            animation: none;
  }

  @-webkit-keyframes reveal {
    from {
      -webkit-clip-path: inset(var(--from));
              clip-path: inset(var(--from));
    }
  }

  @keyframes reveal {
    from {
      -webkit-clip-path: inset(var(--from));
              clip-path: inset(var(--from));
    }
  }

  [data-theme='dark'] {
    --from: 0 0 100% 0;
  }

  [data-theme='light'] {
    --from: 100% 0 0 0;
  }

  [data-theme='system'] {
    --from: 0 100% 0 0;
  }

  @property --column-one {
    inherits: true;
    initial-value: 0;
    syntax: '<number>';
  }

  @property --column-two {
    inherits: true;
    initial-value: 0;
    syntax: '<number>';
  }

  @property --column-three {
    inherits: true;
    initial-value: 0;
    syntax: '<number>';
  }

  @property --column-four {
    inherits: true;
    initial-value: 0;
    syntax: '<number>';
  }

  @property --column-five {
    inherits: true;
    initial-value: 0;
    syntax: '<number>';
  }

  @-webkit-keyframes one {
    from {
      --column-one: 100;
    }
  }

  @keyframes one {
    from {
      --column-one: 100;
    }
  }

  @-webkit-keyframes two {
    fro.........完整代码请登录后点击上方下载按钮下载查看