Реалистичная кнопка с анимированной подсветкой на CSS3
Необычная кнопочка с анимированной подсветкой, как на старых блоках питания на компьютерах
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего 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 |
.switch { background-color: black; width: 150px; height: 195px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; border-radius: 5px; padding: 20px; perspective: 700px; } .switch input { display: none; } .switch input:checked + .button { transform: translateZ(20px) rotateX(25deg); box-shadow: 0 -10px 20px #ff1818; } .switch input:checked + .button .light { animation: flicker 0.2s infinite 0.3s; } .switch input:checked + .button .shine { opacity: 1; } .switch input:checked + .button .shadow { opacity: 0; } .switch .button { transition: all 0.3s cubic-bezier(1, 0, 1, 1); transform-origin: center center -20px; transform: translateZ(20px) rotateX(-25deg); transform-style: preserve-3d; background-color: #9b0621; width: 100%; height: 100%; position: relative; cursor: pointer; background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%); background-repeat: no-repeat; } .switch .button::before { content: ""; background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000; background-repeat: no-repeat; width: 100%; height: 50px; transform-origin: top; transform: rotateX(-90deg); position: absolute; top: 0; } .switch .button::after { content: ""; background-image: linear-gradient(#650000, #320000); width: 100%; height: 50px; transform-origin: top; transform: translateY(50px) rotateX(-90deg); position: absolute; bottom: 0; box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5); } .switch .light { opacity: 0; animation: light-off 1s; position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%); } .switch .dots { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%); background-size: 10px 10px; } .switch .characters { position: absolute; width: 100%; height: 100%; background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%; background-repeat: no-repeat; } .switch .shine { transition: all 0.3s cubic-bezier(1, 0, 1, 1); opacity: 0.3; position: absolute; width: 100%; height: 100%; background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%; background-repeat: no-repeat; } .switch .shadow { transition: all 0.3s cubic-bezier(1, 0, 1, 1); opacity: 1; position: absolute; width: 100%; height: 100%; background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8)); background-repeat: no-repeat; } @keyframes flicker { 0% { opacity: 1; } 80% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes light-off { 0% { opacity: 1; } 80% { opacity: 0; } } |
2#: Следующий код вставьте между тегами <body> и </body>:
|
1 2 3 4 5 6 7 8 9 10 |
<label class="switch"> <input type="checkbox" checked="checked"/> <div class="button"> <div class="light"></div> <div class="dots"></div> <div class="characters"></div> <div class="shine"></div> <div class="shadow"></div> </div> </label> |
