Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/css-egg-switch.markdown

Last active July 29, 2020 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/76f65afdc3ef6224c60dd021d7925af7 to your computer and use it in GitHub Desktop.
Save CodeMyUI/76f65afdc3ef6224c60dd021d7925af7 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Egg Switch
Raw
index.html
<label class="egg-switch">
<input type="checkbox" checked>
<div>
<div class="flipper">
<svg>
<use xlink:href="#flipper">
</svg>
</div>
<div class="egg">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</label>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39 18" id="flipper" fill="currentColor">
<path d="M0.0244740693,1.75473835 C0.00818305726,1.86197078 0,1.97036486 0,2.07892575 L0,15.921377 C0,17.0693688 0.8954305,18 2,18 C2.10445462,18 2.20874874,17.9914953 2.31192515,17.9745638 L17.3119251,15.5130366 C18.2840292,15.3535125 19,14.4826852 19,13.4598497 L19,12.6377416 C19.6666667,11.5984301 20.3333333,11.0787744 21,11.0787744 L39,11.0787744 L39,6.92152835 L21,6.92152835 C20.3333333,6.92152835 19.6666667,6.4018726 19,5.36256109 L19,4.540453 C19,3.51761755 18.2840292,2.64679022 17.3119251,2.48726617 L2.31192515,0.0257389154 C1.2208723,-0.153304839 0.196745571,0.620794577 0.0244740693,1.75473835 Z M12.2049236,12.279252 C12.6185695,12.2575737 12.9714694,12.5753263 12.9931477,12.9889722 C13.0130194,13.3681476 12.747675,13.6962795 12.3847003,13.7650328 L12.2834275,13.7771963 L3.79507644,14.2220519 C3.38143055,14.2437302 3.02853059,13.9259776 3.00685233,13.5123317 C2.98698059,13.1331563 3.25232501,12.8050244 3.61529975,12.7362711 L3.71657251,12.7241076 L12.2049236,12.279252 Z M16.75,5 C16.8683467,5 16.9674868,5.08223341 16.9933973,5.19267729 L17,5.25 L17,12.75 C17,12.8880712 16.8880712,13 16.75,13 C16.6316533,13 16.5325132,12.9177666 16.5066027,12.8073227 L16.5,12.75 L16.5,5.25 C16.5,5.11192881 16.6119288,5 16.75,5 Z M13.7339356,9.6630893 C14.1480861,9.65586028 14.4896817,9.9857353 14.4971398,10.3998858 C14.5035373,10.7795237 14.2269029,11.0981954 13.8617498,11.1542391 L13.7601142,11.1628608 L3.26171343,11.3461111 C2.84756295,11.3533401 2.50596738,11.0234651 2.49850922,10.6093146 C2.49211175,10.2296767 2.76874618,9.91100505 3.13389925,9.85496129 L3.23553482,9.84633957 L13.7339356,9.6630893 Z M3.26171343,6.6630893 L13.7601142,6.84633957 C14.1742647,6.8535686 14.5041397,7.19516417 14.4971402,7.60931465 C14.4902841,7.98895258 14.2026967,8.29777572 13.8358102,8.34104168 L13.7339356,8.34611112 L3.23553482,8.16286085 C2.82138434,8.15563182 2.49150933,7.81403625 2.49850889,7.39988577 C2.50536496,7.02024784 2.79295235,6.7114247 3.15983888,6.66815874 L3.26171343,6.6630893 Z M3.79507644,3.77925197 L12.2834275,4.2241076 C12.6970734,4.24578586 13.0148259,4.59868582 12.9931477,5.01233171 C12.9732759,5.39150712 12.675086,5.69010548 12.306913,5.72054092 L12.2049236,5.7220519 L3.71657251,5.27719627 C3.30292661,5.25551801 2.98517406,4.90261805 3.00685233,4.48897215 C3.02672407,4.10979675 3.32491404,3.81119839 3.69308704,3.78076294 L3.79507644,3.77925197 Z"></path>
</symbol>
</svg>
<!-- twitter / dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/9934807-Egg-Switch" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
<a class="twitter" target="_blank" href="https://twitter.com/aaroniker_me"><svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"></path></svg></a>
Raw
script.js
// Some issues with Safari & mobile - damn 3D - any suggestions?
Raw
style.scss
.egg-switch {
--background: #171827;
--shadow: rgba(246, 248, 255, .08);
--shadow-inner: rgba(13, 15, 24, .8);
--egg: #fff;
--egg-back: #f4d2ad;
--egg-yellow: linear-gradient(135deg, rgba(239,202,51, 1) 50%, rgba(237,139,2, 1) 100%);
--egg-shadow: rgba(13, 15, 24, .25);
--flipper: #F6F8FF;
--flipper-hand: #8A91B4;
--flipper-shadow: #646B8C;
perspective: 160px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
input {
display: none;
& + div {
width: 64px;
height: 32px;
border-radius: 16px;
position: relative;
background: var(--background);
box-shadow: inset 0 1px 3px 0 var(--shadow-inner), 0 1px 0 0 var(--shadow);
.egg {
position: absolute;
left: 4px;
top: 4px;
z-index: 1;
animation: egg 2s linear forwards;
transform-style: preserve-3d;
.front:before,
.front:after,
.back:before,
.back:after {
content: '';
}
.front:before,
.front:after,
.back:before,
.back:after,
.back {
position: absolute;
border-radius: var(--border-radius, 50%);
width: var(--width, var(--size, 24px));
height: var(--height, var(--size, 24px));
left: var(--left, var(--spacing, 0));
top: var(--top, var(--spacing, 0));
background: var(--background, var(--egg));
}
.front {
width: 24px;
height: 24px;
transform: rotateY(180deg);
backface-visibility: hidden;
&:before {
--background: var(--egg);
}
&:after {
--size: 12px;
--spacing: 6px;
--background: var(--egg-yellow);
transform: translateZ(0);
box-shadow: 1px 1px 3px var(--egg-shadow);
}
}
.back {
--background: none;
&:before,
&:after {
--height: 14px;
--background: var(--egg-back);
}
&:before {
--border-radius: 12px 12px 0 0;
clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 100%, 50% 90%, 25% 100%, 0 80%);
}
&:after {
--border-radius: 0 0 12px 12px;
--top: 10px;
clip-path: polygon(0 0, 25% 20%, 50% 10%, 75% 20%, 100% 10%, 100% 100%, 0 100%);
}
}
}
.flipper {
position: absolute;
display: flex;
align-items: center;
top: 7px;
left: 100%;
opacity: 0;
transform-origin: 20px 50%;
transform: translateX(60px) translateY(-32px) rotate(-30deg) scale(.8);
animation: flipper 2s linear;
&:after {
content: '';
width: 20px;
height: 6px;
border-radius: 2px 1px 1px 2px;
display: block;
background: var(--flipper-hand);
box-shadow: inset 0 -1px 0 0 var(--flipper-shadow);
}
svg {
width: 39px;
height: 18px;
display: block;
color: var(--flipper);
}
}
}
&:checked {
& + div {
.flipper {
animation: none;
}
.egg {
animation: crack 2s linear forwards;
.front {
&:before {
animation: egg-white .8s linear forwards 1.4s;
}
}
.back {
&:before,
&:after {
--animate-y: -16px;
transform: translateZ(-2px);
animation: egg-crack .8s linear forwards 1.4s;
}
&:after {
--animate-y: 16px;
}
}
}
}
}
}
}
@keyframes egg {
0%,
40% {
transform: rotateY(180deg) translateX(-32px);
}
50% {
transform: rotateY(180deg) translateX(-33px);
}
75% {
transform: translateZ(32px);
}
90% {
transform: scaleX(.9);
}
100% {
transform: scaleX(.8);
}
}
@keyframes egg-white {
0% {
opacity: .4;
transform: scale(.4);
}
60%,
100% {
transform: scale(1);
}
100% {
opacity: 1;
}
}
@keyframes egg-crack {
0% {
transform: translateZ(-2px);
}
70% {
transform: translateZ(-2px) scale(.8) rotate(4deg) translateY(var(--animate-y));
}
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateZ(-2px) scale(.8) rotate(8deg) translateY(calc(var(--animate-y) * 1.5));
}
}
@keyframes crack {
0% {
transform: rotateY(180deg) scaleX(.8);
}
30% {
transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) translateZ(-24px) scaleX(.8);
}
40% {
transform: rotateY(180deg) rotateZ(-16deg) translateX(-8px) translateY(12px) scaleX(.8);
}
60%,
80% {
transform: rotateY(180deg) translateX(-32px) scaleX(.8);
}
100% {
transform: rotateY(180deg) translateX(-32px);
}
}
@keyframes flipper {
30% {
transform: translateX(-4px);
}
40% {
transform: translateX(-16px);
}
50% {
transform: translateX(-24px);
}
60% {
transform: translateX(-32px) rotateY(50deg) translateZ(16px);
}
70% {
transform: translateX(14px);
}
85%,
100% {
transform: translateX(60px);
}
15%,
80% {
opacity: 1;
}
95%,
100% {
opacity: 0;
}
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
// dribbble & twitter
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2B3044;
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
img {
display: block;
width: 76px;
}
}
.twitter {
position: fixed;
display: block;
right: 112px;
bottom: 14px;
svg {
width: 24px;
height: 24px;
fill: white;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment