css+js实现暗黑与亮色主题切换过渡动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+js实现暗黑与亮色主题切换过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

* {
  box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
  min-height: 100vh;
  color: var(--color);
  background: var(--bg);
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

:root {
	color-scheme: light only;
	--line: color-mix(in lch, canvasText 25%, transparent);
  --color: hsl(0 0% 6%);
  --bg: hsl(0 0% 98%);
  --content-size: 520px;
  --eclipse: 60%;
}

.dark {
	color-scheme: dark only;
  --color: hsl(0 0% 98%);
  --bg: hsl(0 0% 6%);
}

body::before {
  --size: 60px;
  content: '';
  height: 100vh;
  width: 100vw;
  position: fixed;
  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);
  -webkit-mask: linear-gradient(-15deg, transparent 60%, white);
          mask: linear-gradient(-15deg, transparent 60%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

.content {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

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;
/*	justify-self: end;*/
}

.dark a:not(.bear-link):is(:hover, :focus-visible) {
	background: hsl(0 0% 80%);
}

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

footer {
	padding: 2rem;
	text-align: center;
	opacity: 0.5;
}

.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;
}

h1 {
	font-family: 'EB Garamond', serif;
	font-size: clamp(2rem, 5vw + 1rem, 8rem);
  line-height: 1;
  font-weight: 300;
  margin: 0;
}

header {
	width: var(--content-size);
	max-width: 100%;
	margin: 0 auto;
	min-height: 35vh;
	display: grid;
	align-content: end;
	padding: 0 2rem;
}

main {
  width: var(--content-size);
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
  flex: 1;
}

pre {
  max-width: 100%;
}

p {
  text-align: justify;
  margin: 0;
}

.theme-toggle {
  color: var(--color);
  position: fixed;
  top: 1rem;
  right: 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: hsl(0 0% 90%);
}

.dark .theme-toggle:is(:hover, :focus-visible) {
  background: hsl(0 0% 30%);
}

img {
  max-width: 100%;
  height: 80%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  background: hsl(0 0% 50%);
  border-radius: 1rem 0 0 1rem;
  align-self: end;
  position: fixed;
  top: 50%;
  left: calc(50% + 2rem + (var(--content-size) * 0.5));
  translate: 0 -50%;
  -o-object-position: right center;
     object-position: right center;
  max-height: calc(100vh - 10rem);
}

.dark img {
  filter: brightness(0.75);
}

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

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

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

::view-transition-group(root) {
  -webkit-animation-duration: 1.25s;
          animation-duration: 1.25s;
}
::view-transition-new(root),
::view-transition-old(root) {
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  -webkit-animation-name: none;
          animation-name: none;
}

::view-transition-old(root) {
  -webkit-animation-name: reveal-light;
          animation-name: reveal-light;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  z-index: 2;
}
.dark::view-transition-new(root) {
  -webkit-animation-name: reveal-dark;
          animation-name: reveal-dark;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  z-index: 3;
}
.dark::view-transition-old(root) {
	-webkit-animation-name: none;
	        animation-name: none;
}

@-webkit-keyframes reveal-dark {
  from {
    -webkit-clip-path: circle(var(--eclipse) at 200% -200%);
            clip-path: circle(var(--eclipse) at 200% -200%);
    filter: brightness(0.2);
  }
  40% {
    -webkit-clip-path: circle(var(--eclipse) at 50% 50%);
            clip-path: circle(var(--eclipse) at 50% 50%);
  	filter: brightness(0.2);
  }
  to {
  	filter: brightness(1);
    -webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);
  }
}

@keyframes reveal-dark {
  from {
    -webkit-clip-path: circle(var(--eclipse) at 200% -200%);
            clip-path: circle(var(--eclipse) at 200% -200%);
    filter: brightness(0.2);
  }
  40% {
    -webkit-clip-path: circle(var(--eclipse) at 50% 50%);
            clip-path: circle(var(--eclipse) at 50% 50%);
  	filter: brightness(0.2);
  }
  to {
  	filter: brightness(1);
    -webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);
  }
}

@-webkit-keyframes reveal-light {
  0% {
    filter: brightness(1);
    -webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);
  }
  20% {
  	filter: brightness(0.2);
    -webkit-clip-path: circle(var(--eclipse) at 50% 50%);
            clip-path: circle(var(--eclipse) at 50% 50%);
  }
  100% {
    filter: brightness(0.2);
    -webkit-clip-path: circle(var(--eclipse) at -200% 200%);
            clip-path: circle(var(--eclipse) at -200% 200%);
  }
}

@keyframes reveal-light {
  0% {
    filter: brightness(1);
    -webkit-clip-path: circle(100% at 50% 50%);
            clip-path: circle(100% at 50% 50%);
  }
  20% {
  	filter: brightness(0.2);
    -webkit-clip-path: circle(var(--eclipse) at 50% 50%);
            clip-path: circle(var(--eclipse) at 50% 50%);
  }
  100% {
    filter: brightness(0.2);
    -webkit-clip-path: circle(var(--eclipse) at -200% 200%);
            clip-path: circle(var(--eclipse) at -200% 200%);
  }
}

/* Social */
.bear-link {
  color: canvasText;
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: 48px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0.8;
}

:where(.x-link, .bear-link):is(:hover, :focus-visible) {
  opacity: 1;
}
.bear-link svg {
  width: 75%;
}


/* Prism Code */

/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

.dark code[class*="language-"],
.dark pre[class*="language-"] {
	color: #ccc;
}

code[class*="language-"],
pre[class*="language-"] {
  color: hsl(0 0% 20%);
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 15px;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 1rem;
  margin: 0;
  overflow: .........完整代码请登录后点击上方下载按钮下载查看