1 
 2<div class="container">
 3  <div class="toy-camera-container">
 4    <label class="toy-camera-wrapper">
 5      <input type="checkbox" class="toy-camera-input" />
 6      <div class="toy-camera-body">
 7        <div class="toy-camera-button"></div>
 8        <div class="toy-camera-lens"></div>
 9        <div class="toy-camera-photo">
10          <div class="photo-image"></div>
11          <div class="photo-text"></div>
12          <div class="photo-text" style="width: 40%"></div>
13        </div>
14      </div>
15      <div class="toy-camera-shadow"></div>
16    </label>
17  </div>
18</div>          

  1 
  2.toy-camera-container {
  3  --cam-main: #00d2d3;
  4  --cam-dark: #01a3a4;
  5  --cam-accent: #ff9f43;
  6  --cam-shutter: #ff4757;
  7  --photo-bg: #ffffff;
  8  --toy-size: 5.5em;
  9  --elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 10 
 11  display: flex;
 12  align-items: center;
 13  justify-content: center;
 14  padding: 6em;
 15  background-color: #f7f1e3;
 16  border-radius: 4em;
 17  user-select: none;
 18}
 19 
 20.toy-camera-wrapper {
 21  position: relative;
 22  width: var(--toy-size);
 23  height: calc(var(--toy-size) * 0.9);
 24  perspective: 1200px;
 25  cursor: pointer;
 26}
 27 
 28.toy-camera-input {
 29  position: absolute;
 30  opacity: 0;
 31  width: 0;
 32  height: 0;
 33}
 34 
 35.toy-camera-body {
 36  position: absolute;
 37  inset: 0;
 38  background: var(--cam-main);
 39  border-radius: 1.2em;
 40  transform-style: preserve-3d;
 41  transform: translateZ(20px);
 42  transition: all 0.5s var(--elastic);
 43  box-shadow:
 44    0 0.6em 0 var(--cam-dark),
 45    0 1em 2em rgba(0, 0, 0, 0.15),
 46    inset 0 0.2em 0.3em rgba(255, 255, 255, 0.4);
 47  z-index: 10;
 48}
 49 
 50.toy-camera-body::before {
 51  content: "";
 52  position: absolute;
 53  top: 20%;
 54  left: 0;
 55  width: 100%;
 56  height: 15%;
 57  background: var(--cam-accent);
 58  box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.1);
 59}
 60 
 61.toy-camera-button {
 62  position: absolute;
 63  top: -0.6em;
 64  right: 15%;
 65  width: 1.2em;
 66  height: 0.8em;
 67  background: var(--cam-shutter);
 68  border-radius: 0.3em 0.3em 0 0;
 69  box-shadow:
 70    0 0.2em 0 #cc3643,
 71    inset 0 0.1em 0.1em rgba(255, 255, 255, 0.3);
 72  transition: all 0.2s ease;
 73}
 74 
 75.toy-camera-lens {
 76  position: absolute;
 77  top: 50%;
 78  left: 50%;
 79  width: 60%;
 80  height: 65%;
 81  background: #2d3436;
 82  border-radius: 50%;
 83  transform: translate(-50%, -40%) translateZ(15px);
 84  border: 0.3em solid var(--cam-dark);
 85  box-shadow:
 86    0 0.4em 0.8em rgba(0, 0, 0, 0.3),
 87    inset 0 0.2em 0.5em rgba(0, 0, 0, 0.5);
 88  display: flex;
 89  align-items: center;
 90  justify-content: center;
 91  overflow: hidden;
 92}
 93 
 94.toy-camera-lens::after {
 95  content: "";
 96  position: absolute;
 97  top: 15%;
 98  left: 20%;
 99  width: 30%;
100  height: 20%;
101  background: rgba(255, 255, 255, 0.2);
102  border-radius: 50%;
103  transform: rotate(-25deg);
104}
105 
106.toy-camera-photo {
107  position: absolute;
108  bottom: 10%;
109  left: 50%;
110  width: 75%;
111  height: 80%;
112  background: var(--photo-bg);
113  border-radius: 0.4em;
114  transform: translateX(-50%) translateZ(-10px) translateY(0);
115  transition: all 0.7s var(--elastic);
116  box-shadow:
117    0 0.2em 0.5em rgba(0, 0, 0, 0.1),
118    inset 0 0 0 0.2em #f1f2f6;
119  display: flex;
120  flex-direction: column;
121  padding: 0.4em;
122  opacity: 0;
123  z-index: 1;
124}
125 
126.photo-image {
127  width: 100%;
128  height: 70%;
129  background: #74b9ff;
130  border-radius: 0.2em;
131  position: relative;
132  overflow: hidden;
133}
134 
135.photo-image::after {
136  content: "";
137  position: absolute;
138  top: 15%;
139  right: 15%;
140  width: 0.5em;
141  height: 0.5em;
142  background: #ffeaa7;
143  border-radius: 50%;
144}
145 
146.photo-text {
147  width: 60%;
148  height: 0.2em;
149  background: #dfe6e9;
150  margin-top: 0.4em;
151  border-radius: 0.1em;
152}
153 
154.toy-camera-wrapper:hover .toy-camera-body {
155  transform: translateZ(40px) rotateX(10deg);
156}
157 
158.toy-camera-input:active + .toy-camera-body {
159  transform: translateZ(10px) scale(0.95);
160}
161 
162.toy-camera-input:active + .toy-camera-body .toy-camera-button {
163  transform: translateY(0.3em);
164  box-shadow: 0 0.1em 0 #cc3643;
165}
166 
167.toy-camera-input:checked + .toy-camera-body {
168  transform: translateZ(30px) translateY(-10%);
169}
170 
171.toy-camera-input:checked + .toy-camera-body .toy-camera-photo {
172  opacity: 1;
173  transform: translateX(-50%) translateZ(-30px) translateY(120%) rotate(5deg);
174  animation: photo-bounce 0.8s var(--elastic);
175}
176 
177.toy-camera-input:checked + .toy-camera-body .toy-camera-lens::before {
178  content: "";
179  position: absolute;
180  inset: 0;
181  background: white;
182  opacity: 0;
183  animation: lens-flash 0.4s ease-out;
184}
185 
186.toy-camera-input:focus-visible + .toy-camera-body {
187  outline: 3px solid #70a1ff;
188  outline-offset: 15px;
189}
190 
191@keyframes photo-bounce {
192  0% {
193    transform: translateX(-50%) translateZ(-30px) translateY(0);
194  }
195  100% {
196    transform: translateX(-50%) translateZ(-30px) translateY(120%) rotate(5deg);
197  }
198}
199 
200@keyframes lens-flash {
201  0% {
202    opacity: 1;
203    transform: scale(0.1);
204  }
205  50% {
206    opacity: 0.8;
207    transform: scale(1.5);
208  }
209  100% {
210    opacity: 0;
211    transform: scale(2);
212  }
213}
214 
215.toy-camera-shadow {
216  position: absolute;
217  bottom: -1em;
218  left: 50%;
219  width: 90%;
220  height: 1.5em;
221  background: radial-gradient(circle, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
222  transform: translateX(-50%);
223  transition: all 0.5s ease;
224  pointer-events: none;
225}
226 
227.toy-camera-input:checked ~ .toy-camera-shadow {
228  width: 120%;
229  opacity: 0.1;
230}