#e8e8e8
1label, .bubble { 2 display: block; 3 -webkit-tap-highlight-color: transparent; 4} 5 6label { 7 animation: float74 4s ease-in-out infinite; 8} 9 10.bubble, .bubble:before, .bubble:after { 11 transition-duration: 0.2s; 12} 13 14.bubble, .bubble:after { 15 border-radius: 50%; 16} 17 18.bubble { 19 background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 20 radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 21 radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 22 radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 23 radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 24 radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%), 25 radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%); 26 box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset, 27 0 -0.15em 0.4em hsl(0,90%,45%) inset, 28 0 0.05em 0.05em hsl(0,90%,45%) inset, 29 0.05em 0 0.1em hsl(0,90%,100%) inset, 30 -0.05em 0 0.1em hsl(0,90%,100%) inset, 31 0 0.1em 0.4em hsl(0,90%,60%) inset; 32 cursor: pointer; 33 position: relative; 34 width: 3em; 35 height: 3em; 36 transform-style: preserve-3d; 37 transition-property: box-shadow, transform, width, height; 38 transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming); 39 will-change: transform; 40 -webkit-appearance: none; 41 appearance: none; 42 z-index: 0; 43} 44 45.bubble:before, .bubble:after { 46 content: ""; 47 display: block; 48 position: absolute; 49 transition-timing-function: var(--bubbleTiming); 50} 51 52.bubble:before { 53 border-radius: 0.75em; 54 box-shadow: 0 0 0 0.5em hsl(0,0%,100%) inset; 55 filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2)); 56 top: 50%; 57 left: 50%; 58 width: 1.5em; 59 height: 1.5em; 60 transform: translate3d(-50%,-50%,-1px); 61 z-index: -1; 62} 63 64.bubble:after { 65 background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%); 66 filter: blur(4px); 67 top: 0.6em; 68 left: 0.6em; 69 width: 100%; 70 height: 100%; 71 transform: translate3d(0,0,-1px); 72 z-index: -2; 73} 74 75.bubble:focus, .bubble:hover { 76 transform: scale(1.1); 77 outline: none; 78} 79 80.bubble:focus:active, .bubble:hover:active { 81 width: 3.6em; 82 height: 2.4em; 83} 84 85.bubble:focus:before, .bubble:hover:before { 86 filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2)); 87} 88 89.bubble:focus:after, .bubble:hover:after { 90 transform: translate3d(0.15em,0.15em,-1px); 91} 92 93.bubble:checked { 94 box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset, 95 0 -0.15em 0.4em hsl(120,90%,45%) inset, 96 0 0.05em 0.05em hsl(120,90%,45%) inset, 97 0.05em 0 0.1em hsl(120,90%,100%) inset, 98 -0.05em 0 0.1em hsl(120,90%,100%) inset, 99 0 0.1em 0.4em hsl(120,90%,60%) inset; 100} 101 102.bubble:checked:before { 103 border-radius: 0.25em; 104 width: 0.5em; 105} 106/* Reduced motion */ 107@media (prefers-reduced-motion: reduce) { 108 label { 109 animation: none; 110 } 111 112 .bubble, .bubble:before, .bubble:after { 113 transition-duration: 0s; 114 } 115 116 .bubble:focus, .bubble:hover { 117 transform: scale(1); 118 } 119 120 .bubble:focus:active, .bubble:hover:active { 121 width: 3em; 122 height: 3em; 123 } 124 125 .bubble:focus:before, .bubble:hover:before { 126 filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2)); 127 } 128 129 .bubble:focus:after, .bubble:hover:after { 130 transform: translate3d(0,0,-1px); 131 } 132} 133/* Animations */ 134@keyframes float74 { 135 from, to { 136 transform: translate(0,3%); 137 } 138 139 25% { 140 transform: translate(-3%,0); 141 } 142 143 50% { 144 transform: translate(0,-3%); 145 } 146 147 75% { 148 transform: translate(3%,0); 149 } 150}
3.7K views
3.7K views
Comments
MIT License