File tree Expand file tree Collapse file tree 1 file changed +72
-0
lines changed
Expand file tree Collapse file tree 1 file changed +72
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < link rel ="icon " href ="/assets/icon.png " />
7+ < title > Day 90/100</ title >
8+ </ head >
9+ < body >
10+ < main >
11+ < div class ="switch " id ="switch ">
12+ < div class ="switch-inner "> </ div >
13+ </ div >
14+ </ main >
15+
16+ < style >
17+ body {
18+ margin : 0 ;
19+ overflow : hidden;
20+ display : flex;
21+ justify-content : center;
22+ align-items : center;
23+ min-height : 100vh ;
24+ background-color : # fff ;
25+ }
26+
27+ .switch {
28+ position : relative;
29+ cursor : pointer;
30+ width : 100px ;
31+ height : 100px ;
32+ border-radius : 30px ;
33+ background-color : transparent;
34+ outline : 10px solid # 000 ;
35+ outline-offset : -10px ;
36+ overflow : hidden;
37+ }
38+
39+ .switch-inner {
40+ position : absolute;
41+ top : calc (50% - 30px );
42+ left : calc (50% - 30px );
43+ width : 60px ;
44+ height : 60px ;
45+ border-radius : 12px ;
46+ background-color : # 000 ;
47+ opacity : 0 ;
48+ transform-origin : center center;
49+ transform : scale (2 ) rotate (135deg );
50+ transition : all 0.5s ease-in-out;
51+ }
52+
53+ .switch : hover .switch-inner {
54+ opacity : 0.2 ;
55+ }
56+
57+ .switch-on .switch-inner ,
58+ .switch-on : hover .switch-inner {
59+ opacity : 1 ;
60+ transform : scale (1 ) rotate (0deg );
61+ }
62+ </ style >
63+
64+ < script >
65+ const switchElement = document . getElementById ( "switch" ) ;
66+
67+ switchElement . addEventListener ( "click" , ( ) => {
68+ switchElement . classList . toggle ( "switch-on" ) ;
69+ } ) ;
70+ </ script >
71+ </ body >
72+ </ html >
You can’t perform that action at this time.
0 commit comments