熟练使用-webkit-box-reflect反射实现各种动态效果
时间：2023-03-31 13:38:41
CSS
寰堜箙浠ュ墠鐨勪竴绡囨枃绔犱腑鎻愬埌浜嗗睘鎬?webkit-box-reflect鈥斺€斾粠鍙嶅皠寮€濮嬶紝璇磋CSS缁ф壙inherit-webkit-box-reflect鏄竴涓潪甯告湁瓒ｇ殑灞炴€э紝瀹冧娇CSS鑳藉鍍忛暅瀛愪竴鏍峰伐浣滐紝鍙嶆槧鎴戜滑鐨勫厓绱犳渶鍒濈粯鍒剁殑鍐呭銆備笂娆″啓鐨勬椂鍊欙紝瀹冪殑鍏煎鎬ц繕鏄潪甯搁潪甯告儴娣＄殑锛屼絾鏄粖澶╋紝铏界劧杩樻槸涓€涓狽on-standardgrammar锛屼絾鏄吋瀹规€у凡缁忓ぇ澶ф彁楂樹簡锛屾垜浠彲浠ョ敤瀹冩潵瀹炵幇寰堝鏈夎叮鐨勬晥鏋溿€傛埅鑷?021-02-19锛屽叾鍏煎鎬у凡缁忚揪鍒?1.02%锛屽弬瑙丆ANIUSE-webkit-box-reflect锛氭帴涓嬫潵杩涘叆姝ｆ枃銆?webkit-box-reflect鍩烘湰鐢ㄦ硶-webkit-box-reflect鐨勮娉曢潪甯哥畝鍗曪紝鏈€鍩烘湰鐨勭敤娉曟槸杩欐牱鐨勶細div{-webkit-box-reflect:below;}wherebelowcanbebelow|浠ヤ笂|宸right琛ㄧず涓嬨€佷笂銆佸乏銆佸彸锛屽嵆鏈?涓柟鍚戝彲渚涢€夋嫨銆傚亣璁炬垜浠湁濡備笅鍥剧墖锛?div>
div{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');}plus-webkit-box-reflect:瀵癸紝灏辨槸鍙宠竟鐨勫€掑奖锛歞iv{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:right;}鏁堟灉濡備笅锛屽湪鍏冪礌鍙充晶鐢熸垚涓€涓暅鍍忓厓绱狅細璁剧疆鏂瑰悜鍚庨潰鐨勫弽灏勮窛绂伙紝涔熷彲浠ユ帴涓€涓叿浣撶殑鍊兼潵琛ㄧず涔嬮棿鐨勮窛绂诲弽灏勫拰鍘熷鍏冪礌銆俤iv{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:right10px;}鍔犱笂10px鍚庯紝鍙嶅皠鍜屽師鍏冪礌涔嬮棿浼氭湁绌洪殭10px锛氳缃櫄瀹炲弽灏勮繕鏈変竴涓緢閲嶈鐨勪綔鐢紝灏辨槸鍦╫rientation涔嬪悗锛屾偍杩樺彲浠ヨ缃笎鍙樺€笺€傚埄鐢ㄨ繖涓笎鍙樺€硷紝鍙互瀹炵幇鍊掑奖鐨勮櫄鍖栨晥鏋滐紝杩欎竴鐐瑰緢閲嶈銆俤iv{background-image:url('https://images.pokemontcg.io/xy2/12_hires.png');-webkit-box-reflect:below2pxlinear-gradient(transparent,rgba(0,0,0,.5));}鐪嬫晥鏋滐紝铏氬疄鍙樺寲鍚庯紝鏇村儚鍊掑奖浜嗐€傚叾瀹炶繖閲岀殑娓愬彉灏辨槸缁欏€掑奖鐨勫浘鐗囧姞涓婁竴涓狹ASK灞炴€э紝MASK灞炴€х殑閫忔槑閮ㄥ垎锛屽浘鐗囦細鍙樻垚Transparent锛岃€岀函鑹查儴鍒嗕繚鎸佸師鍥俱€傚叧浜嶤SSMASK灞炴€э紝濡傛灉浣犺繕鏈夌枒闂紝寤鸿浣犵湅鐪嬭繖绡囨枃绔狅細FantasticCSSMASKCodePenDemo---webkit-box-reflectDemo浣跨敤-webkit-box-reflect瀹炵幇涓€浜涙湁瓒ｇ殑鍔ㄦ€佹晥鏋滃ぇ甯坱hebasics璇硶涔嬪悗锛屾垜浠彲浠ョ敤瀹冩潵瀹炵幇涓€浜涙湁瓒ｇ殑鍔ㄧ敾鏁堟灉锛屼笅闈㈢畝鍗曠綏鍒椾竴涓嬨€傛垜鍙戠幇杩欎釜灞炴€х壒鍒€傚悎鐢ㄥ湪涓€浜涙繁鑹查鏍肩殑椤甸潰涓€傚彲浠ヨ寰堝鍔ㄦ€佹晥鏋滅湅璧锋潵楂樺ぇ涓婂緢澶氥€傦紙涓汉瀹＄編锛夊湪鎸夐挳涓娇鐢?webkit-box-reflect鍔犱笂涓€浜涘姩鎬佽竟妗嗗姩鐢绘寜閽彲浠ヨ惀閫犲嚭闈炲父绉戝够鐨勬晥鏋滐細鏈夊叴瓒ｇ殑鍙互鑷繁鎴虫簮鐮佷簡瑙ｄ竴涓嬶細CodePendemo-webkit-box-reflectNeonButtonHoverEffect鍦ㄦ枃瀛椾腑浣跨敤浜?webkit-box-reflect锛屽湪鏆楅粦绯诲垪鐨勬爣棰樻枃瀛椾腑浣跨敤浜?webkit-box-reflect锛岀灛闂存樉寰楅珮澶т笂涓嶅皯銆侰odePendemo-Font&-webkit-box-reflectusing-webkit-box-reflectin3D鍢匡紝鎺ヤ笅鏉ワ紝鎴戜滑鐢氳嚦鍙互鍦?D鏁堟灉涓娇鐢?webkit-box-reflect锛屽畬鍏ㄤ笉鍚岀殑瑙傛劅浣撻獙銆傛垜浠粰3D鐓х墖澧欎竴涓€掑奖鏁堟灉锛欳odePendemo-3DView&-webkit-box-reflect浣跨敤-webkit-box-reflect鍒涢€犺壓鏈浘妗堟湁瓒ｇ殑CSS鑹烘湳锛屽張鏉ヤ簡銆傚湪琚佸窛鍏堢敓鐨勮繖绡囨枃绔?-ChineseWindowLatticeAndCSS涓紝浠嬬粛浜嗕娇鐢?webkit-box-reflect鐢熸垚鍓焊鑹烘湳鐨勬€濊矾銆傜敱浜?webkit-box-reflect鍙互浜х敓鍙嶅皠锛屾垜浠敤瀹冩潵涓嶆柇宓屽濞冨▋锛屽眰灞傚彔鍙狅紝鎵€浠ユ垜浠彧闇€瑕佺敓鎴愪竴涓熀鏈厓绱狅紝鎴戜滑灏卞彲浠ュ埄鐢ㄥ弽灏勬潵浜х敓鍚勭鏁堟灉銆傚亣璁撅紝鎴戜滑鏈変互涓嬬粨鏋勶細
