1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
7+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
8+ < title > Document</ title >
9+ </ head >
10+ < style >
11+ *
12+ margin : 0 ;
13+ padding : 0 ;
14+ box-sizing : border-box;
15+ }
16+
17+ body {
18+ background-color : # edf1f4
19+ perspective : 500px ;
20+ --c-wrap-shadow1 : # f5f9fd
21+ --c-wrap-shadow2 : # d8dbe5
22+ --c-wrap-bg : # e2e6eb
23+ --c-btn-shadow1 : # d9dbe6
24+ --c-btn-shadow2 : # f5f9fd
25+ --c-txt1 : # aaa
26+ --c-txt2 : # 111
27+ transition : background-color 0.4s linear;
28+ }
29+
30+ .dark {
31+ background-color : # 333
32+ --c-wrap-shadow1 : # 292929
33+ --c-wrap-shadow2 : # 202020
34+ --c-wrap-bg : # 505050
35+ --c-btn-shadow1 : # 323232
36+ --c-btn-shadow2 : # 444
37+ --c-txt1 : # 888
38+ --c-txt2 : # fff
39+ }
40+
41+ # btnWrapper {
42+ position : relative;
43+ width : 380px ;
44+ height : 80px ;
45+ padding : 12px 16px ;
46+ margin : 300px auto 0 ;
47+ border-radius : 12px ;
48+ overflow : hidden;
49+ background-color : var (--c-wrap-bg );
50+ box-shadow : -10px -10px 15px var (--c-wrap-shadow1 ), 10px 10px 15px var (--c-wrap-shadow2 );
51+ transform-origin : var (--wraper-origin );
52+ transition : transform 0.4s cubic-bezier (0 , 0 , 0.48 , 1 ), box-shadow 0.4s linear, background-color 0.4s linear;
53+ }
54+
55+ .rotateWrap {
56+ transform : rotateY (var (--wraper-rotate ));
57+ }
58+
59+ # btnWrapper ::before {
60+ content : "" ;
61+ position : absolute;
62+ left : var (--groove-left );
63+ top : 12px ;
64+ width : calc (50% - 16px - 8px );
65+ height : calc (100% - 24px );
66+ border-radius : 12px ;
67+ box-shadow : inset 8px 8px 6px var (--c-btn-shadow1 ), inset -5px -5px 15px var (--c-btn-shadow2 ), inset -5px -5px 15px var (--c-btn-shadow2 ), inset 7px 7px 6px var (--c-btn-shadow1 );
68+ transition : left 1s cubic-bezier (0.82 , 0.12 , 0.18 , 0.88 ), box-shadow 0.4s linear;
69+ }
70+
71+ .btn {
72+ float : left;
73+ display : flex;
74+ align-items : center;
75+ justify-content : center;
76+ width : 50% ;
77+ height : 100% ;
78+ padding : inherit;
79+ color : var (--c-txt1 );
80+ transition : color 0.4s linear;
81+ animation : txtOutScale 0.6s linear;
82+ cursor : pointer;
83+ }
84+
85+ .active {
86+ color : var (--c-txt2 );
87+ transform : scale (1.1 );
88+ animation : txtEnterScale 0.4s linear;
89+ }
90+
91+ @keyframes txtEnterScale {
92+ 0% {
93+ transform : scale (1 );
94+ }
95+
96+ 80% {
97+ transform : scale (1.15 );
98+ }
99+
100+ 100% {
101+ transform : scale (1.1 );
102+ }
103+ }
104+
105+ @keyframes txtOutScale {
106+ 0% {
107+ transform : scale (1.1 );
108+ }
109+
110+ 80% {
111+ transform : scale (0.95 );
112+ }
113+
114+ 100% {
115+ transform : scale (1 );
116+ }
117+ }
118+ </ style >
119+
120+ < body >
121+ < div id ="btnWrapper ">
122+ < div class ="btn active "> 开灯</ div >
123+ < div class ="btn "> 关灯</ div >
124+ </ div >
125+ </ body >
126+
127+ </ html >
128+
129+ < script >
130+ let wrapper = document . getElementById ( 'btnWrapper' ) ;
131+ wrapper . style . setProperty ( '--groove-left' , '12px' ) ;
132+ let btns = document . getElementsByClassName ( 'btn' ) ;
133+ for ( let i = 0 ; i < btns . length ; i ++ ) {
134+ btns [ i ] . addEventListener ( 'click' , function ( e ) {
135+ // ThemeChange(i === 1);
136+ resetBtn ( btns ) ;
137+ wrapper . style . setProperty ( '--groove-left' , `calc(12px + ${ i * 50 } ) ;
138+ wrapper . style . setProperty ( '--wraper-origin' , `${ i === 0 ? '75% top' : '25% top' } ) ;
139+ wrapper . style . setProperty ( '--wraper-rotate' , `${ i === 0 ? - 8 : 8 } ) ;
140+ wrapper . className = 'rotateWrap' ;
141+ setTimeout ( ( ) => {
142+ btns [ i ] . className = 'btn active' ;
143+ } , 500 ) ;
144+ setTimeout ( ( ) => {
145+ wrapper . className = ''
146+ } , 550 ) ;
147+ } )
148+ }
149+ // 重置按钮类名
150+ function resetBtn ( btns ) {
151+ for ( let i = 0 ; i < btns . length ; i ++ ) {
152+ setTimeout ( ( ) => {
153+ btns [ i ] . className = 'btn' ;
154+ } , 100 )
155+ }
156+ }
157+ // 改变主题
158+ function ThemeChange ( bol ) {
159+ let body = document . body ;
160+ body . className = bol ? 'dark' : ''
161+ }
162+
163+ </ script >
0 commit comments