CSS橘子蓝莓切换开关

orange to blueberry

css, fruit, switch

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1172
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
  --blue: #2196F3;
  --orange: #FFB300;
  --green: #49685E;
  --bg-color: var(--blue);
  --color: var(--orange);
  --rotate: -15deg;
  --dur: 200ms;
  --tf: cubic-bezier(0.215, 0.61, 0.355, 1);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

input { 
  position: absolute;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

label {
  --size: 50vmin;
  
  cursor: pointer;
  position: relative;
  transform: rotate(var(--rotate));
  transition: 
    background-color var(--dur) var(--tf),
    transform var(--dur) var(--tf);
  z-index: 2;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input + label {
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  border-radius: 100%;
}

input:hover + label {  
  transform: scale(1.01) rotate(var(--rotate));
}

input:active + label {  
  transform: scale(0.98) rotate(var(--rotate));
}

input:checked + label {
  --rotate: 15deg;
  --color: var(--blue);
}

.stem {
  --size: 1vmin;
  
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 2vmin);
  margin: auto;
  background-color: var(--green);
  border-radius: 360px;
  width: var(--size);
  height: calc(var(--size) * 8);
}

input:checked + label .stem {
  --size: 4vmin;
  
  top: 10%;
  bottom: auto;
  height: var(--size);
  border-radius: 100%;
  background-color: black;
  opacity: 0.35;
  transform: scaleY(0.8);
}

.leaf {
  --size: 15vmin;
  
  position: absolute;
  left: 100%;
  bottom: 50%;
  margin: auto;
  background-color: var(--green);
  border-radius: 360px 0px 360px 0px;
  width: var(--size);
  height: calc(var(--size) / 2);
/*   transform: rotate(15deg); */
}

.leaf.small {
  --size: 10vmin;
  
  left: auto;
  right: 100%;
  transform: scaleX(-1);
}

input:checked + label .leaf {
  --size: 6vmin;
  
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  background: black;
  border-radius: 2px;
  width: var(--size);
  height: var(--size);
  opacity: 0.6;
  transform: translate(-50%, -50%);
}

input:checked + label .leaf:before,
input:checked + label .leaf:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--size);
  width: var(--size);
  border-radius: inherit;
  background: inherit;
}

input:checked + label .leaf:before {
  transform: rotate(30deg);
}

input:checked + label .leaf:after {
  transform: rotate(60deg);
}

input:checked + label .leaf.small {
  display: none;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color);
  z-index: 1;
  transition: background-color var(--dur) var(--tf);
}

input:checked ~ .background {
  --bg-color: orange;
}

HTML

orange to blueberry

css, fruit, switch

编辑器支持Emmet

快捷键

orange to blueberry

css, fruit, switch

纯CSS实现披萨形状的切换开关按钮

6款CSS3制作的开关切换按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：