878 views
CSSAdd prefixes
1.switch { 2 font-size: 17px; 3 position: relative; 4 display: inline-block; 5 width: 64px; 6 height: 34px; 7} 8 9.switch input { 10 opacity: 0; 11 width: 0; 12 height: 0; 13} 14 15.slider { 16 position: absolute; 17 cursor: pointer; 18 top: 0; 19 left: 0; 20 right: 0; 21 bottom: 0; 22 background-color: #73C0FC; 23 transition: .4s; 24 border-radius: 30px; 25} 26 27.slider:before { 28 position: absolute; 29 content: ""; 30 height: 30px; 31 width: 30px; 32 border-radius: 20px; 33 left: 2px; 34 bottom: 2px; 35 z-index: 2; 36 background-color: #e8e8e8; 37 transition: .4s; 38} 39 40.sun svg { 41 position: absolute; 42 top: 6px; 43 left: 36px; 44 z-index: 1; 45 width: 24px; 46 height: 24px; 47} 48 49.moon svg { 50 fill: #73C0FC; 51 position: absolute; 52 top: 5px; 53 left: 5px; 54 z-index: 1; 55 width: 24px; 56 height: 24px; 57} 58 59/* .switch:hover */.sun svg { 60 animation: rotate 15s linear infinite; 61} 62 63@keyframes rotate { 64 65 0% { 66 transform: rotate(0); 67 } 68 69 100% { 70 transform: rotate(360deg); 71 } 72} 73 74/* .switch:hover */.moon svg { 75 animation: tilt 5s linear infinite; 76} 77 78@keyframes tilt { 79 80 0% { 81 transform: rotate(0deg); 82 } 83 84 25% { 85 transform: rotate(-10deg); 86 } 87 88 75% { 89 transform: rotate(10deg); 90 } 91 92 100% { 93 transform: rotate(0deg); 94 } 95} 96 97.input:checked + .slider { 98 background-color: #183153; 99} 100 101.input:focus + .slider { 102 box-shadow: 0 0 1px #183153; 103} 104 105.input:checked + .slider:before { 106 transform: translateX(30px); 107}
HTML
1<label class="switch"> 2 <span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#ffd43b"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg></span> 3 <span class="moon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg></span> 4 <input type="checkbox" class="input"> 5 <span class="slider"></span> 6</label>