Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="power-switch-wr"> <div class="power-switch"> <input type="checkbox" /> <div class="button"> <svg class="power-off"> <use xlink:href="#line" class="line" /> <use xlink:href="#circle" class="circle" /> </svg> <svg class="power-on"> <use xlink:href="#line" class="line" /> <use xlink:href="#circle" class="circle" /> </svg> </div> </div> </div> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" id="line"> <line x1="75" y1="34" x2="75" y2="74"/> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" id="circle"> <circle cx="75" cy="80" r="35"/> </symbol> </svg> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
.power-switch-wr { padding: 40px; background: #337AB7; display: flex; justify-content: center; align-items: center; } .power-switch { position: relative; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; } .power-switch .button { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .power-switch .button:after { content: ""; width: 100%; height: 100%; position: absolute; background: radial-gradient(circle closest-side, #FFF, transparent); filter: blur(20px); opacity: 0; transition: opacity 1s ease, transform 1s ease; transform: perspective(1px) translateZ(0); backface-visibility: hidden; } .power-switch .button .power-on, .power-switch .button .power-off { height: 100%; width: 100%; position: absolute; z-index: 1; fill: none; stroke: #FFF; stroke-width: 10px; stroke-linecap: round; stroke-linejoin: round; } .power-switch .button .power-on .line, .power-switch .button .power-off .line { opacity: .2; } .power-switch .button .power-on .circle, .power-switch .button .power-off .circle { opacity: .2; transform: rotate(-58deg); transform-origin: center 80px; stroke-dasharray: 240; stroke-dashoffset: 60; } .power-switch .button .power-on { filter: drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.8)); } .power-switch .button .power-on .line { opacity: 0; transition: opacity .3s ease 1s; } .power-switch .button .power-on .circle { opacity: 1; stroke-dashoffset: 250; transition: transform 0s ease, stroke-dashoffset 1s ease 0s; } .power-switch input { position: absolute; height: 100%; width: 100%; z-index: 2; cursor: pointer; opacity: 0; } .power-switch input:checked + .button:after { opacity: 0.15; transform: scale(2) perspective(1px) translateZ(0); backface-visibility: hidden; transition: opacity .5s ease, transform .5s ease; } .power-switch input:checked + .button .power-on, .power-switch input:checked + .button .power-off { animation: click-animation .3s ease forwards; transform: scale(1); } .power-switch input:checked + .button .power-on .line, .power-switch input:checked + .button .power-off .line { animation: line-animation .8s ease-in forwards; } .power-switch input:checked + .button .power-on .circle, .power-switch input:checked + .button .power-off .circle { transform: rotate(302deg); } .power-switch input:checked + .button .power-on .line { opacity: 1; transition: opacity .05s ease-in .55s; } .power-switch input:checked + .button .power-on .circle { transform: rotate(302deg); stroke-dashoffset: 60; transition: transform .4s ease .2s, stroke-dashoffset .4s ease .2s; } @keyframes line-animation { 0% { transform: translateY(0); } 10% { transform: translateY(10px); } 40% { transform: translateY(-25px); } 60% { transform: translateY(-25px); } 85% { transform: translateY(10px); } 100% { transform: translateY(0px); } } @keyframes click-animation { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } |
За основу взято решение, найденное на codepen.io у пользователя Milan Raring
Добавить комментарий: