CSS开关

下载代码

html

css

分享到微信朋友圈

html

<h1>Switches</h1>

<p>Theme:</p>

</div>

</section>

css

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  --color: hsl(220, 50%, 90%);
  --global-background: hsl(220, 25%, 10%);
}
body {
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color);
  background: var(--global-background);
}

h1 {
  font-size: 3.2rem;
  font-weight: normal;
  letter-spacing: .4rem;
}

p {
  font-size: 1.6rem;
}

.themes {
  display: flex;
  align-items: center;
  position: absolute;
  top: 6rem;
  right: 6rem;
  padding: .4rem 2rem .4rem 3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .8rem;
}
.theme__color {
  margin: 1rem;
  cursor: pointer;
  position: relative;
}
.theme__color:first-of-type {
  margin-left: 2rem;
}
.theme__input {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
}
.theme__input:checked + .theme__icon {
  box-shadow: 0 0 0 0.5rem var(--global-background), 0 0 0 0.6rem rgba(255, 255, 255, 0.2);
  -webkit-transform: scale(1);
          transform: scale(1);
}
.theme__input:focus + .theme__icon {
  box-shadow: 0 0 0 0.5rem var(--global-background), 0 0 0 0.6rem var(--color);
}
.theme__icon {
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 100rem;
  background: var(--color);
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  transition: .2s;
}

.switches[data-theme="green"] {
  --primary-light: hsl(160, 79%, 46%);
  --primary-dark: hsl(160, 79%, 16%);
  --ripple: hsla(160, 79%, 46%, .1);
  --focus: hsl(160, 69%, 46%);
}
.switches[data-theme="blue"] {
  --primary-light: hsl(200, 79%, 46%);
  --primary-dark: hsl(200, 79%, 16%);
  --ripple: hsla(200, 79%, 46%, .1);
  --focus: var(--primary-light);
}
.switches {
  display: flex;
  align-items: center;
  margin-top: 8rem;
}

.switch:not(:last-of-type) {
  margin-right: 4rem;
}
.switch__label {
  position: relative;
  cursor: pointer;
}
.switch__input {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.switch__input:focus + .switch__design {
  box-shadow: 0 0 0 0.1rem var(--global-background), 0 0 0 0.2rem var(--focus);
}
.switch {
  --width: 6rem;
  --height: 3rem;
  --background: hsl(0, 0%, 30%);
  --checked-background: var(--primary-dark);
  --thumb-size: 1.6rem;
  --thumb-ripple-color: var(--ripple);
  --thumb-background: hsl(0, 0%, 65%);
  --checked-thumb-background: var(--primary-light);
  --thumb-space-between-edges: .6rem;
  --thumb-out: var(--thumb-space-between-edges);
}
.switch--1, .switch--3, .switch--5, .switch--7 {
  --width: 4rem;
  --height: 1.6rem;
  --thumb-size: 2rem;
  --thumb-space-between-edges: 0rem;
  --thumb-out: -.3rem;
}
.switch--2, .switch--6 {
  --background: hsla(0, 0%, 20%);
}
.switch--3, .switch--4 {
  --border: 1px solid hsl(0, 0%, 60%);
  --background: transparent;
}
.switch--7 {
  --width: 3rem;
  --thumb-out: calc((var(--thumb-size) / 2) - ((var(--thumb-size) / 2) * 2) + .2rem);
}
.switch__design {
  display: inline-block;
  width: var(--width);
  height: var(--height);
  border: var(--border);
  border-radius: 100rem;
  background: var(--background);
  position: relative;
  transition: .2s, box-shadow 0s;
}
.switch__design::before {
  content: '';
  position: absolute;
  left: var(--thumb-out);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 100rem;
  background: var(--thumb-background);
  transition: inherit;
}
.switch--5 .switch__input:not(:checked) + .switch__design, .switch--7 .switch__input:not(:checked) + .switch__design {
  --thumb-ripple-color: hsla(0, 0%, 65%, .1);
}
.switch--6 .switch__design {
  transition: .3s, box-shadow 0s;
}
.switch__input:checked + .switch__design {
  border-color: transparent;
  background: var(--checked-background);
}
.switch__input:checked + .switch__design::before {
  left: calc(100% - (var(--thumb-size) + var(--thumb-out)));
  background: var(--checked-thumb-background);
}
.switch--6 .switch__input:checked + .switch__design::before {
  left: calc(100% - var(--thumb-out));
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}
.switch--5 .switch__design:hover::before, .switch--7 .switch__design:hover::before, .switch--5 .switch__input:focus + .switch__design::before, .switch--7 .switch__input:focus + .switch__design::before {
  box-shadow: 0 0 0 0.9rem var(--thumb-ripple-color);
}
.switch--6 .switch__design:active::before {
  width: calc(var(--thumb-size) + .4rem);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg