svg+js实现日食点击动画效果代码-html代码-BFW代码库

svg+js实现日食点击动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现日食点击动画效果代码

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
#switch-theme {
  width: 50vmin;
  cursor: pointer;
}

:root {
  --sun-clr: #f3d05e;
  --dark-clr: hsl(246, 23%, 16%);
  --light-clr: #F9F6EF;
  --clr-foreground: var(--dark-clr);
  /*hsl(0 0% 0%);*/
  --clr-background: var(--light-clr);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-background: var(--dark-clr);
    --clr-foreground: var(--light-clr);
  }
}
.light-theme {
  --clr-foreground: var(--dark-clr);
  --clr-background: var(--light-clr);
}

.dark-theme {
  --clr-background: var(--dark-clr);
  --clr-foreground: var(--light-clr);
}

.light-theme .img .toggle-sun {
  transform: rotate(0.5turn);
}

.light-theme .sun-rays,
.light-theme .sun-core {
  color: var(--sun-clr);
  fill: var(--sun-clr);
}

.moon-mask,
.sun-core,
.sun-rays {
  transition: 750ms ease-out;
  transform-origin: center center;
}

.dark-theme .moon-mask {
  r: 4.8;
  cx: 12;
  cy: 12;
}

.light-theme .moon-mask {
  r: 5;
  transform: rotate(-90deg);
  cx: 20;
  cy: 0;
}

.dark-theme .sun-core {
  fill: color-mix(in lab, var(--sun-clr), orangered);
  transform: rotate(-40deg);
}

.dark-theme .sun-rays {
  transform: rotate(-180deg);
  opacity: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  background: var(--clr-background);
  color: var(--clr-foreground);
  transition: 1s ease-out;
}

.note {
  text-align: center;
}
</style>


  
</head>

<body translate="no">
  <!--shamelessly cannibalizing my pen-->
<!--https://codepen.io/ghaste/pen/WNOjQJN-->
<div id="switch-theme">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
    <mask id="mask">
      <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
      <circle class="moon-mask&qu.........完整代码请登录后点击上方下载按钮下载查看