前端纯CSS特效丨新型选中特效（开关）

yycvip

HTML：

1. <label class="container">
   
2.   <div class="simple-text">Click me!</div>
   
3.   <input checked="checked" type="checkbox" />
   
4.   <div class="checkmark"></div>
   
5.   <div class="torch">
   
6.     <div class="head">
   
7.       <div class="face top">
   
8.         <div></div>
   
9.         <div></div>
   
10.         <div></div>
    
11.         <div></div>
    
12.       </div>
    
13.       <div class="face left">
    
14.         <div></div>
    
15.         <div></div>
    
16.         <div></div>
    
17.         <div></div>
    
18.       </div>
    
19.       <div class="face right">
    
20.         <div></div>
    
21.         <div></div>
    
22.         <div></div>
    
23.         <div></div>
    
24.       </div>
    
25.     </div>
    
26.     <div class="stick">
    
27.       <div class="side side-left">
    
28.         <div></div>
    
29.         <div></div>
    
30.         <div></div>
    
31.         <div></div>
    
32.         <div></div>
    
33.         <div></div>
    
34.         <div></div>
    
35.         <div></div>
    
36.         <div></div>
    
37.         <div></div>
    
38.         <div></div>
    
39.         <div></div>
    
40.         <div></div>
    
41.         <div></div>
    
42.         <div></div>
    
43.         <div></div>
    
44.       </div>
    
45.       <div class="side side-right">
    
46.         <div></div>
    
47.         <div></div>
    
48.         <div></div>
    
49.         <div></div>
    
50.         <div></div>
    
51.         <div></div>
    
52.         <div></div>
    
53.         <div></div>
    
54.         <div></div>
    
55.         <div></div>
    
56.         <div></div>
    
57.         <div></div>
    
58.         <div></div>
    
59.         <div></div>
    
60.         <div></div>
    
61.         <div></div>
    
62.       </div>
    
63.     </div>
    
64.   </div>
    
65. </label>

复制代码

CSS：

1. .container input {
   
2.   position: absolute;
   
3.   opacity: 0;
   
4.   cursor: pointer;
   
5.   height: 0;
   
6.   width: 0;
   
7. }
   
8. 
   
9. .container {
   
10.   display: flex;
    
11.   flex-direction: column;
    
12.   align-items: center;
    
13.   position: relative;
    
14.   cursor: pointer;
    
15.   user-select: none;
    
16. }
    
17. 
    
18. .simple-text {
    
19.   position: absolute;
    
20.   bottom: -40px;
    
21.   width: 120px;
    
22.   text-align: center;
    
23.   color: white;
    
24.   font-size: 16pt;
    
25.   font-weight: 800;
    
26.   font-family: monospace;
    
27. }
    
28. 
    
29. .torch {
    
30.   display: flex;
    
31.   justify-content: center;
    
32.   height: 150px;
    
33. }
    
34. 
    
35. .head,
    
36. .stick {
    
37.   position: absolute;
    
38.   width: 30px;
    
39.   transform-style: preserve-3d;
    
40.   transform: rotateX(-30deg) rotateY(45deg);
    
41. }
    
42. 
    
43. .stick {
    
44.   position: relative;
    
45.   height: 120px;
    
46. }
    
47. 
    
48. .face {
    
49.   position: absolute;
    
50.   transform-style: preserve-3d;
    
51.   width: 30px;
    
52.   height: 30px;
    
53.   display: grid;
    
54.   grid-template-columns: 50% 50%;
    
55.   grid-template-rows: 50% 50%;
    
56.   background-color: #000000;
    
57. }
    
58. 
    
59. .top {
    
60.   transform: rotateX(90deg) translateZ(15px);
    
61. }
    
62. 
    
63. .left {
    
64.   transform: rotateY(-90deg) translateZ(15px);
    
65. }
    
66. 
    
67. .right {
    
68.   transform: rotateY(0deg) translateZ(15px);
    
69. }
    
70. 
    
71. .top div,
    
72. .left div,
    
73. .right div {
    
74.   width: 102%;
    
75.   height: 102%;
    
76. }
    
77. 
    
78. .top div:nth-child(1),
    
79. .left div:nth-child(3),
    
80. .right div:nth-child(3) {
    
81.   background-color: #ffff9760;
    
82. }
    
83. 
    
84. .top div:nth-child(2),
    
85. .left div:nth-child(1),
    
86. .right div:nth-child(1) {
    
87.   background-color: #ffd80060;
    
88. }
    
89. 
    
90. .top div:nth-child(3),
    
91. .left div:nth-child(4),
    
92. .right div:nth-child(4) {
    
93.   background-color: #ffffff60;
    
94. }
    
95. 
    
96. .top div:nth-child(4),
    
97. .left div:nth-child(2),
    
98. .right div:nth-child(2) {
    
99.   background-color: #ff8f0060;
    
100. }
     
101. 
     
102. .side {
     
103.   position: absolute;
     
104.   width: 30px;
     
105.   height: 120px;
     
106.   display: grid;
     
107.   grid-template-columns: 50% 50%;
     
108.   grid-template-rows: repeat(8, 12.5%);
     
109.   cursor: pointer;
     
110.   translate: 0 12px;
     
111. }
     
112. 
     
113. .side-left {
     
114.   transform: rotateY(-90deg) translateZ(15px) translateY(8px);
     
115. }
     
116. 
     
117. .side-right {
     
118.   transform: rotateY(0deg) translateZ(15px) translateY(8px);
     
119. }
     
120. 
     
121. .side-left div,
     
122. .side-right div {
     
123.   width: 103%;
     
124.   height: 103%;
     
125. }
     
126. 
     
127. .side div:nth-child(1) {
     
128.   background-color: #443622;
     
129. }
     
130. 
     
131. .side div:nth-child(2),
     
132. .side div:nth-child(2) {
     
133.   background-color: #2e2517;
     
134. }
     
135. 
     
136. .side div:nth-child(3),
     
137. .side div:nth-child(5) {
     
138.   background-color: #4b3b23;
     
139. }
     
140. 
     
141. .side div:nth-child(4),
     
142. .side div:nth-child(10) {
     
143.   background-color: #251e12;
     
144. }
     
145. 
     
146. .side div:nth-child(6) {
     
147.   background-color: #292115;
     
148. }
     
149. 
     
150. .side div:nth-child(7) {
     
151.   background-color: #4b3c26;
     
152. }
     
153. 
     
154. .side div:nth-child(8) {
     
155.   background-color: #292115;
     
156. }
     
157. 
     
158. .side div:nth-child(9) {
     
159.   background-color: #4b3a21;
     
160. }
     
161. 
     
162. .side div:nth-child(11),
     
163. .side div:nth-child(15) {
     
164.   background-color: #3d311d;
     
165. }
     
166. 
     
167. .side div:nth-child(12) {
     
168.   background-color: #2c2315;
     
169. }
     
170. 
     
171. .side div:nth-child(13) {
     
172.   background-color: #493a22;
     
173. }
     
174. 
     
175. .side div:nth-child(14) {
     
176.   background-color: #2b2114;
     
177. }
     
178. 
     
179. .side div:nth-child(16) {
     
180.   background-color: #271e10;
     
181. }
     
182. 
     
183. .container input:checked ~ .torch .face {
     
184.   filter: drop-shadow(0px 0px 2px rgb(255, 255, 255))
     
185.     drop-shadow(0px 0px 10px rgba(255, 237, 156, 0.7))
     
186.     drop-shadow(0px 0px 25px rgba(255, 227, 101, 0.4));
     
187. }
     
188. 
     
189. .container input:checked ~ .torch .top div:nth-child(1),
     
190. .container input:checked ~ .torch .left div:nth-child(3),
     
191. .container input:checked ~ .torch .right div:nth-child(3) {
     
192.   background-color: #ffff97;
     
193. }
     
194. 
     
195. .container input:checked ~ .torch .top div:nth-child(2),
     
196. .container input:checked ~ .torch .left div:nth-child(1),
     
197. .container input:checked ~ .torch .right div:nth-child(1) {
     
198.   background-color: #ffd800;
     
199. }
     
200. 
     
201. .container input:checked ~ .torch .top div:nth-child(3),
     
202. .container input:checked ~ .torch .left div:nth-child(4),
     
203. .container input:checked ~ .torch .right div:nth-child(4) {
     
204.   background-color: #ffffff;
     
205. }
     
206. 
     
207. .container input:checked ~ .torch .top div:nth-child(4),
     
208. .container input:checked ~ .torch .left div:nth-child(2),
     
209. .container input:checked ~ .torch .right div:nth-child(2) {
     
210.   background-color: #ff8f00;
     
211. }
     
212. 
     
213. .container input:checked ~ .torch .side div:nth-child(1) {
     
214.   background-color: #7c623e;
     
215. }
     
216. 
     
217. .container input:checked ~ .torch .side div:nth-child(2),
     
218. .container input:checked ~ .torch .side div:nth-child(2) {
     
219.   background-color: #4c3d26;
     
220. }
     
221. 
     
222. .container input:checked ~ .torch .side div:nth-child(3),
     
223. .container input:checked ~ .torch .side div:nth-child(5) {
     
224.   background-color: #937344;
     
225. }
     
226. 
     
227. .container input:checked ~ .torch .side div:nth-child(4),
     
228. .container input:checked ~ .torch .side div:nth-child(10) {
     
229.   background-color: #3c2f1c;
     
230. }
     
231. 
     
232. .container input:checked ~ .torch .side div:nth-child(6) {
     
233.   background-color: #423522;
     
234. }
     
235. 
     
236. .container input:checked ~ .torch .side div:nth-child(7) {
     
237.   background-color: #9f7f50;
     
238. }
     
239. 
     
240. .container input:checked ~ .torch .side div:nth-child(8) {
     
241.   background-color: #403320;
     
242. }
     
243. 
     
244. .container input:checked ~ .torch .side div:nth-child(9) {
     
245.   background-color: #977748;
     
246. }
     
247. 
     
248. .container input:checked ~ .torch .side div:nth-child(11),
     
249. .container input:checked ~ .torch .side div:nth-child(15) {
     
250.   background-color: #675231;
     
251. }
     
252. 
     
253. .container input:checked ~ .torch .side div:nth-child(12) {
     
254.   background-color: #3d301d;
     
255. }
     
256. 
     
257. .container input:checked ~ .torch .side div:nth-child(13) {
     
258.   background-color: #987849;
     
259. }
     
260. 
     
261. .container input:checked ~ .torch .side div:nth-child(14) {
     
262.   background-color: #3b2e1b;
     
263. }
     
264. 
     
265. .container input:checked ~ .torch .side div:nth-child(16) {
     
266.   background-color: #372a17;
     
267. }

复制代码