鏈瘒浼氭寔缁洿鏂伴偅浜涚偒閰风殑浜や簰鏁堟灉绯诲垪鏂囩珷锛屼粖澶╁甫鏉ユ嫧鍔ㄥ紑鍏崇浉鍏崇殑缁勪欢銆備互涓嬫槸瀵规湰鏂囨秹鍙婄殑浜ゆ崲鏈虹粍浠剁殑姒傝堪銆傛€诲叡鏀堕泦浜?2绉嶄笉鍚岀殑浜や簰鏁堟灉銆傛垜鐩镐俊鎬绘湁涓€娆鹃€傚悎浣犮€傞偅浜涗綘涓嶇煡閬撶殑鐐叿浜や簰鏁堟灉绯诲垪锛氶偅浜涗綘涓嶇煡閬撶殑鐐叿鎸夐挳浜や簰鏁堟灉閭ｄ簺浣犱笉鐭ラ亾鐨勭偒閰峰鑸氦浜掓晥鏋滈偅浜涗綘涓嶇煡閬撶殑鐐叿寮€鍏充氦浜掓晥鏋?D鏁堟灉鐨勬牳蹇冨欢浼稿埌inside鏄€氳繃璁剧疆鍐呴槾褰眀ox-shadow:inset鏉ュ疄鐜扮殑銆傞櫎浜嗕负鍏冪礌鏈韩娣诲姞闃村奖澶栵紝杩樿缃簡涓や釜浼厓绱犳潵澧炲己3D鏁堟灉銆備互涓嬫槸鏍稿績瀹炵幇浠ｇ爜锛歭abel{background:#af4c4c;border:.5pxsolidrgba(117,117,117,0.31);妗嗛槾褰憋細鎻掑叆0px0px4px0pxrgba(0,0,0,0.2),0-3px4pxrgba(0,0,0,0.15);&::before{杈规锛氭棤锛涘搴︼細40px锛涢珮搴︼細40px锛涙闃村奖锛氭彃鍏?.5px-1px1pxrgba(0,0,0,0.35);鑳屾櫙锛?fff锛涘彉鎹細鏃嬭浆锛?25deg锛夛紱}&::after{鑳屾櫙锛氶€忔槑锛涢珮搴︼細璁＄畻锛?00%+8px锛夛紱杈圭晫鍗婂緞锛?0px锛涢《閮細-5px锛涘搴︼細璁＄畻锛?00%+8px锛夛紱-绱㈠紩锛?锛涙闃村奖锛氭彃鍏?px2px4px-2pxrgba(0,0,0,0.2),0px1px2px0pxrgba(151,151,151,0.2);}}鏁堟灉2杩欐槸涓€涓瀬鍏剁畝鍗曠殑鏁堟灉锛岄€忔槑寮€鍏虫晥鏋滐紝鏁翠綋鏁堟灉鍙湁涓€涓櫧鑹茬殑杈规鍜屼竴涓櫧鑹茬殑鍦嗗舰骞崇Щ鎺у埗寮€鍏炽€傝繖閲屾秹鍙婄殑浠ｇ爜姣旇緝绠€鍗曪紝灏变笉鍙﹁灞曠ず浜嗐€傛晥鏋?杩欎釜鏁堟灉鐨勫垏鎹㈣繃绋嬪姩鐢讳笉鍐嶆槸绠€鍗曠殑缈昏瘧銆備氦浜掍腑鐨勪袱绉嶇姸鎬佸眰娆″垎鏄庯紝杩囨浮鏁堟灉棰囨湁鍒涙剰銆傛暣浣撳姩鐢绘晥鏋滃垎涓轰互涓嬪嚑涓儴鍒嗭細棰滆壊鐢辩豢鑹插彉涓虹孩鑹茬Щ鍔ㄦ柟鍧楁棆杞竴鍛ㄧ殑鍥炬爣鐢扁垰鍙樹负鉁曪紝鍥炬爣浣跨敤浼厓绱犲疄鐜版牳蹇冧唬鐮侀儴鍒嗭細/*閫夋嫨鏁堟灉*/#checkcross:checked+label{.check{left:68px;鍙樻崲锛氭棆杞紙360deg锛夛紱鑳屾櫙锛?c34a4a锛?*鍥炬爣鍙樺寲*/&:before{width:27px;鍙樻崲锛氭棆杞紙-45deg锛夊钩绉伙紙-8px锛?8px锛夛紱}&:after{瀹藉害锛?7px;鍙樻崲锛氭棆杞紙45deg锛夊钩绉伙紙18px锛?px锛夛紱}}}鏁堟灉4杩欐槸涓€涓瘮杈冩湁鎰忔€濈殑浜や簰鏁堟灉锛屼粠涓€涓ゼ鍒板爢鍙犲涓ゼ鐨勪袱绉嶇姸鎬佸垏鎹㈡晥鏋滐紝鍙互鎹㈡垚鍏朵粬鍏冪礌鏁堟灉銆傛牳蹇冨疄鐜伴€昏緫鏄粯璁ゅ彧鏄剧ず涓€涓ゼ鍥撅紝閫氳繃scale(0)闅愯棌鍏朵粬楗煎浘锛屽苟璁剧疆涓嶅悓鐨勫畾浣嶅潗鏍囧€笺€傚綋鐘舵€佹敼鍙樻椂锛岃缃畇cale(1)骞跺姞涓婁笉鍚岀殑寤惰繜鏃堕棿锛屼唬鐮佸涓嬶細#pancake:checked{+label{.pancakes{transform:translateX(70px);}.pancake{&:nth-child(2){鍙樻崲锛氱缉鏀?1);杞崲寤惰繜锛?2s锛泒&:nth-child(3){鍙樻崲锛氱缉鏀?1);杞崲寤惰繜锛?4s锛泒}.butter{鍙樻崲锛氭瘮渚嬶紙1锛夛紱杞崲寤惰繜锛?6s锛泒}}鏁堟灉5杩欎篃鏄竴涓瘮杈冩湁鎰忔€濈殑浜や簰鏁堟灉锛屾暣浣撳姩鐢讳篃鍜?3绫讳技锛岀Щ鍔ㄧ殑杩囩▼浣跨敤浜嗕竴涓棆杞潵鍒囨崲鐘舵€併€備絾鏄牳蹇冪殑鍦嗗舰閮ㄥ垎灏卞彉鎴愪簡鍗￠€氱嫍鐨勬晥鏋滐紝寮€鍚悗鐙楃嫍鐨勮〃鎯呭彂鐢熶簡鍙樺寲锛屽姞鍏ヤ簡寰瑧鍚愯垖澶答煒濈殑鏁堟灉锛岃€虫湹鍔ㄤ簡銆傝繖涓や釜鏁堟灉涔熸槸鍩轰簬scale瀹炵幇鐨勶紝鏍稿績浠ｇ爜濡備笅锛?doggo:checked{+label{.dog{left:68px;鍙樻崲锛氭棆杞紙360搴︼級锛泒.mouth{鍙樻崲锛氭瘮渚嬶紙1锛夛紱杩囨浮寤惰繜锛?7s锛泒.ear.right{鍙樻崲锛歴caleX(-1)鏃嬭浆(-35deg);杞崲寤惰繜锛?6s锛泒}}鏁堟灉6杩欎篃鏄竴涓瘮杈冪畝鍗曠殑鏁堟灉锛屼笉鍚岀殑鏄紑鍏冲渾鐨勫楂樹細澶т簬鑳屾櫙濉厖閮ㄥ垎鐨勫楂橈紝褰㈡垚瀵规瘮鏁堟灉銆傚紑鍦哄姩鐢昏繃绋嬩篃澧炲姞浜嗚礉濉炲皵鏇茬嚎鎺у埗锛屽苟澧炲姞浜嗗紑鍦哄悗闃村奖鏀惧ぇ鐨勬晥鏋滐紝鎻愬崌浜嗙敤鎴蜂氦浜掍綋楠屻€傛劅瑙夈€傛牳蹇冧唬鐮佸涓嬶細.checkbox-wrapper-3#cbx-3:checked+.labelspan{background:#4F2EDC;杞崲锛歵ranslateX(70px)锛涜繃娓★細鎵€鏈?.2scubic-bezier(0.8,0.4,0.3,1.25)锛岃儗鏅?.15sease锛涚洅瀛愰槾褰憋細03px8pxrgba(79,46,220,0.2);}/*闃村奖鏀惧ぇ鏁堟灉*/.checkbox-wrapper-3#cbx-3:checked+.labelspan:before{transform:scale(1);涓嶉€忔槑搴︼細0锛涜繃娓★細鎵€鏈?.4s缂撳拰锛泒鏁堟灉7杩欐槸涓€娆鹃鏍煎彲鐖辩殑寮€鍏虫晥鏋滐紝閫氳繃娣诲姞娓愬彉鑳屾櫙鑹插拰闃村奖鏉ョ獊鍑?D鏁堟灉锛屽苟涓旈€氳繃浼厓绱犳帶鍒堕潰閮ㄨ〃鎯呭拰琛ㄦ儏鍙樺寲鐨勮繃绋嬩篃闈炲父鐢熷姩鍜屽己澶с€傚洜涓鸿繖閲屽湪鏀瑰彉琛ㄦ儏鐨勬椂鍊欙紝缁欐暣涓厓绱犲姞浜嗕竴涓猋杞存棆杞紝鑰岃〃鎯呬腑鐪肩潧鍜屽槾宸村疄鐜扮殑浼厓绱犳槸鏍规嵁鍐呭涓殑鐗规畩绗﹀彿瀹炵幇鐨勶紝骞舵病鏈夐€氳繃鍚庡彴瀹炵幇棰滆壊銆傛牳蹇冧唬鐮佸涓嬶細.checkbox-wrapper-5.checklabel::before{content:"路路";}.checkbox-wrapper-5.checklabel::after{content:"鈼?;}input[type="checkbox"]:checked+label::after{transform:rotateY(360deg);}Effect8鐪嬪埌浜嗗緢澶氭甯哥殑锛屽嚭鏍哥殑鍦嗗舰寮€鍏炽€傚紑鍏充笂鏈変竴涓狾N/OFF鐨勬枃瀛楁晥鏋滐紝鍏跺疄杩欎篃鏄袱涓吉鍏冪礌锛屾枃瀛楁槸閫氳繃浣跨敤鏍囩涓殑鑷畾涔夊睘鎬ф潵浼犻€掔殑銆傚姩鐢昏繃绋嬪氨鏄钩绉讳袱涓吉鍏冪礌銆備吉鍏冪礌鐨勫搴﹀拰楂樺害涓庡閮ㄥ厓绱犵殑瀹藉害鍜岄珮搴︾浉鍚岋紝鍥犳鐘舵€佸彉鍖栨椂绉诲姩鐨勮窛绂讳负100%銆傛牳蹇冧唬鐮佸涓嬶細
