svg+css实现日出日落白昼切换按钮动画效果代码-html代码-BFW代码库

svg+css实现日出日落白昼切换按钮动画效果代码

代码语言：html

代码描述：svg+css实现日出日落白昼切换按钮动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.theme-toggle-btn {
  --toggleSize: 36px;
  width: var(--toggleSize);
  display: grid;
  place-content: center;
}

.theme-toggle-btn input,
.theme-toggle-btn label {
    grid-area: 1/1;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-within {
  filter: hue-rotate(30deg)
}

#theme-toggle {
  width: var(--toggleSize);
  height: var(--toggleSize);
  opacity: 0.00000001;
}

.sr-only {
  position: absolute;
  font-size: 0.0000001px;
  opacity: 0.00000001;
}

.sun line,
.sun path {
  transition-duration: 0.5s;
}

.reflection {
  opacity: 0;
  transform: translateY(-5px);
  transition-delay: 0.4s;
}

#theme-toggle:checked + label .sun-bottom {
  opacity: 0;
}

#theme-toggle:checked + label .reflection {
  opacity: 1;
  transform: translateY(0);
}

#theme-toggle:checked + label .extend {
  transform: scaleX(5) translateX(1.5px);
}

#theme-toggle:checked + label .ray:not(.extend) {
  opacity: 0;
}

.ray:nth-child(1) {
  transition-delay: 0.05s;
}

.ray:nth-child(2) {
  transition-delay: 0.1s;
}

.ray:nth-child(3) {
  transition-delay: 0.15s;
}

.ray:nth-child(4) {
  transition-delay: 0.2s;
}

.ray:nth-child(5) {
  transition-delay: 0.25s;
}

.ray:nth-child(6) {
  transition-delay: 0.3s;
}

.sun-bottom {
  transition-delay: 0.3s;
}

body {
  display: grid;
  height: 50vh;
  place-items: center;
}
</style>



</head>

<body  >
  <div class="theme-toggle-btn">
    <input type="checkbox" id="theme-toggle"/>
    <label for="theme-toggle">
      <p class="sr-only">Theme Toggle</p>
      <svg class="sun" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 118.4 118.4" style="enable-background:new 0 0 118.4 118.4;" xml:space="preserve">
      <style type="text/css">
        :root {
          --color: hotpink;
       .........完整代码请登录后点击上方下载按钮下载查看