优雅的Switch » Yorlg 的小角落

优雅的Switch

2023-12-02 10:21

|

745

|

0

|

473 字

|

18 分钟

这个设计同样可以移植到任何网页设计中，无论是PC端还是移动端的网页，它可以让网页看起来更有设计感，让用户的视觉感官更加强烈。

先看效果

话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
       :root {
      --trans: all 0.6s ease-in-out;
      width: 100%;
      height: 100%;
    }
 
    .box {
      width: 300px;
      height: 300px;
      display: grid;
      justify-content: center;
      align-items: center;
      background: #eee;
      transition: var(--trans);
    }
 
    .box:has(#switch input:checked) {
      background: #555;
    }
 
    #imgs {
      display: none;
    }
 
    #switch {
      position: relative;
      display: block;
      width: 150px;
      height: 60px;
      border-radius: 30px;
      transition: 0.3s all ease-in-out;
      overflow: hidden;
    }
 
    #switch>input {
      display: none;
    }
 
    #switch div {
      width: 100%;
      height: 100%;
      transition: var(--trans);
      border-radius: 30px;
    }
 
    #switch>div {
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(0, 0, 0, 0.6);
    }
 
    #switch>div>svg {
      transition: var(--trans);
    }
 
    #switch #sunMoon {
      overflow: hidden;
      position: absolute;
      left: 5px;
      top: 5px;
      width: 50px;
      height: 50px;
      background: #e5e15a;
      border-radius: 100%;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), inset 3px 3px 3px rgba(255, 255, 255, 0.6), inset -3px -3px 3px rgba(0, 0, 0, 0.2);
    }
 
    #switch .sky {
      background-size: 300px;
    }
 
    #switch #day {
      opacity: 1;
      position: absolute;
      --hue: 210;
      background-image: radial-gradient(circle, hsl(var(--hue), 100%, 90%) 0%, hsl(var(--hue), 100%, 90%) 30%, hsl(var(--hue), 100%, 85%) 32%, hsl(var(--hue), 100%, 85%) 40%, hsl(var(--hue), 100%, 80%) 42%, hsl(var(--hue), 100%, 80%) 50%, hsl(var(--hue), 100%, 75%) 52%, hsl(var(--hue), 100%, 75%) 60%, hsl(var(--hue), 100%, 70%) 62%, hsl(var(--hue), 100%, 70%) 100%);
      background-position-x: 170px;
    }
 
    #switch #day svg {
      transform-origin: left top;
      transform: rotate(0deg);
    }
 
    #switch #night {
      opacity: 0;
      position: absolute;
      --hue: 210;
      background-image: radial-gradient(circle, hsl(var(--hue), 0%, 50%) 0%, hsl(var(--hue), 0%, 50%) 30%, hsl(var(--hue), 0%, 45%) 32%, hsl(var(--hue), 0%, 45%) 40%, hsl(var(--hue), 0%, 40%) 42%, hsl(var(--hue), 0%, 40%) 50%, hsl(var(--hue), 0%, 35%) 52%, hsl(var(--hue), 0%, 35%) 60%, hsl(var(--hue), 0%, 30%) 62%, hsl(var(--hue), 0%, 30%) 100%);
      background-position-x: -170px;
    }
 
    #switch #night svg {
      transform-origin: 500px 60px;
      transform: rotate(6deg);
    }
 
    #switch #moon {
      background: #bbb;
      position: relative;
      opacity: 0.8;
      left: 120%;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), inset 3px 3px 3px rgba(255, 255, 255, 0.6), inset -3px -3px 3px rgba(0, 0, 0, 0.2);
    }
 
    #switch:has(input:checked) #day {
      opacity: 0;
      background-position-x: 300px;
    }
 
    #switch:has(input:checked) #day svg {
      transform: rotate(15deg);
    }
 
    #switch:has(input:checked) #night {
      opacity: 1;
      background-position-x: -20px;
    }
 
    #switch:has(input:checked) #night svg {
      transform: rotate(0deg);
    }
 
    #switch:has(input:checked) #sunMoon {
      left: 95px;
    }
 
    #switch:has(input:checked) #moon {
      left: 0;
      opacity: 1;
    }
  </style>
</head>
 
<body>
  <div class="box">
    <svg id='imgs'>
      <defs>
        <g id="star">
          <path id="path445"
            d="M 105.45181,97.567559 81.201944,94.103695 66.03057,113.33605 69.494434,89.086191 50.262075,73.914817 74.511938,77.378681 89.683312,58.146322 86.219448,82.396185 Z"
            transform="matrix(4.580287,-1.9961824,1.9961824,4.580287,-377.76186,-87.303715)" />
        </g>
        <g id="cloud">
          <path id="path732"
            d="M 26.278986,1.5907338 A 6.5048339,6.5048339 0 0 0 21.637438,3.5442992 2.6019338,2.6019338 0 0 0 20.161877,3.085288 2.6019338,2.6019338 0 0 0 17.612389,5.1745792 3.9029005,3.9029005 0 0 0 16.535692,5.0230272 3.9029005,3.9029005 0 0 0 14.865842,5.3993362 3.7921798,3.7921798 0 0 0 11.663848,3.6388712 3.7921798,3.7921798 0 0 0 8.391813,5.5164632 2.4081727,2.4081727 0 0 0 7.1797871,5.1888252 2.4081727,2.4081727 0 0 0 4.7715635,7.5970472 2.4081727,2.4081727 0 0 0 7.1797871,10.00527 2.4081727,2.4081727 0 0 0 8.5421786,9.5826642 a 3.7921798,3.7921798 0 0 0 3.1216694,1.6405678 3.7921798,3.7921798 0 0 0 1.510382,-0.316559 3.9029005,3.9029005 0 0 0 3.361462,1.92191 3.9029005,3.9029005 0 0 0 3.639639,-2.495277 6.5048339,6.5048339 0 0 0 6.103655,4.266821 6.5048339,6.5048339 0 0 0 6.462951,-5.8049028 3.4876985,3.4876985 0 0 0 2.920654,-3.440206 A 3.4876985,3.4876985 0 0 0 32.1749,1.8673274 3.4876985,3.4876985 0 0 0 29.915064,2.7018565 6.5048339,6.5048339 0 0 0 26.278986,1.5907338 Z" />
        </g>
        <circle id="hole" cx="50" cy="50" r="50" />
      </defs>
    </svg>
 
    <label id="switch">
      <input type="checkbox">
      <div class="sky" id="day">
        <svg width="100%" height="100%">
          <use xlink:href="#cloud" style="fill:#fff;transform:scale(6) translate(0px, 3px);" />
          <use xlink:href="#cloud"
            style="fill:#fff; opacity:0.6; transform:scale(7) rotate(-1deg) translate(-7px, 2px);" />
        </svg>
      </div>
      <div class="sky" id="night">
        <svg width="100%" height="100%">
          <use xlink:href="#star" style="transform:scale(0.03) translate(650px, 500px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.02) translate(1450px, 1500px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.025) translate(1500px, 1700px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.018) translate(1250px, 2000px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.028) translate(2000px, 600px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.021) translate(2200px, 1500px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.027) translate(2500px, 900px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.03) translate(2500px, 1350px);fill:#fff;"></use>
          <use xlink:href="#star" style="transform:scale(0.03) translate(2100px, 1500px);fill:#fff;"></use>
        </svg>
      </div>
      <div id="sunMoon">
        <div id="moon">
          <svg width="100%" height="100%">
            <use xlink:href='#hole' style='fill:#999; transform:scale(0.18) translate(40px, 100px);'></use>
            <use xlink:href='#hole' style='fill:#999; transform:scale(0.12) translate(180px, 50px);'></use>
            <use xlink:href='#hole' style='fill:#999; transform:scale(0.1) translate(300px, 250px);'></use>
          </svg>
        </div>
      </div>
    </label>
  </div>
</body>
 
</html>

现在都流行SCSS写法是吧，放心也有

:root {
  --trans: all 0.6s ease-in-out;
  width: 100%;
  height: 100%;
}
 
.box {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background: #eee;
  &:has(#switch input:checked) {
    background: #555;
  }
  transition: var(--trans);
}
 
#imgs {
  display: none;
}
 
#switch {
  position: relative;
  display: block;
  width: 150px;
  height: 60px;
  border-radius: 30px;
  transition: 0.3s all ease-in-out;
  overflow: hidden;
  & > input {
    display: none;
  }
  div {
    width: 100%;
    height: 100%;
    transition: var(--trans);
    border-radius: 30px;
  }
  & > div {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3),
      inset -3px -3px 6px rgba(0, 0, 0, 0.6);
    & > svg {
      transition: var(--trans);
    }
  }
  #sunMoon {
    overflow: hidden;
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background: #e5e15a;
    border-radius: 100%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
      inset 3px 3px 3px rgba(255, 255, 255, 0.6),
      inset -3px -3px 3px rgba(0, 0, 0, 0.2);
  }
  .sky {
    background-size: 300px;
  }
  #day {
    opacity: 1;
    position: absolute;
    --hue: 210;
    background-image: radial-gradient(
      circle,
      hsl(var(--hue) 100% 90%) 0%,
      hsl(var(--hue) 100% 90%) 30%,
      hsl(var(--hue) 100% 85%) 32%,
      hsl(var(--hue) 100% 85%) 40%,
      hsl(var(--hue) 100% 80%) 42%,
      hsl(var(--hue) 100% 80%) 50%,
      hsl(var(--hue) 100% 75%) 52%,
      hsl(var(--hue) 100% 75%) 60%,
      hsl(var(--hue) 100% 70%) 62%,
      hsl(var(--hue) 100% 70%) 100%
    );
    background-position-x: 170px;
    svg {
      transform-origin: left top;
      transform: rotate(0deg);
    }
  }
 
  #night {
    opacity: 0;
    position: absolute;
    --hue: 210;
    background-image: radial-gradient(
      circle,
      hsl(var(--hue) 0% 50%) 0%,
      hsl(var(--hue) 0% 50%) 30%,
      hsl(var(--hue) 0% 45%) 32%,
      hsl(var(--hue) 0% 45%) 40%,
      hsl(var(--hue) 0% 40%) 42%,
      hsl(var(--hue) 0% 40%) 50%,
      hsl(var(--hue) 0% 35%) 52%,
      hsl(var(--hue) 0% 35%) 60%,
      hsl(var(--hue) 0% 30%) 62%,
      hsl(var(--hue) 0% 30%) 100%
    );
    background-position-x: -170px;
    svg {
      transform-origin: 500px 60px;
      transform: rotate(6deg);
    }
  }
  #moon {
    background: #bbb;
    position: relative;
    opacity: 0.8;
    left: 120%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
      inset 3px 3px 3px rgba(255, 255, 255, 0.6),
      inset -3px -3px 3px rgba(0, 0, 0, 0.2);
  }
  &:has(input:checked) {
    #day {
      opacity: 0;
      background-position-x: 300px;
      svg {
        transform: rotate(15deg);
      }
    }
    #night {
      opacity: 1;
      background-position-x: -20px;
      svg {
        transform: rotate(0deg);
      }
    }
    #sunMoon {
      left: 95px;
    }
    #moon {
      left: 0;
      opacity: 1;
    }
  }
}

是不是很简单，纯CSS制作Switch动画开关按钮，也可以改成js版本，那就需要自己动手咯。

theme

暂无评论

发送评论编辑评论

Markdown

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!