当前位置：首页 > Web前端 > CSS

使用CSS制作波浪效果的妙招

时间：2023-03-30 22:47:08 CSS

涔嬪墠浠嬬粛杩囧嚑绉嶄娇鐢ㄧ函CSS瀹炵幇娉㈡氮鏁堟灉鐨勬柟娉曘€傜浉鍏崇殑鏂囩珷鏈変袱绡囷細绾疌SS瀹炵幇娉㈡氮鏁堟灉锛佸阀濡欒繍鐢–SS瀹炵幇鐐叿鐨勫厖鐢靛姩鐢绘湰鏂囧皢浠嬬粛鍙︿竴绉岰SS瀹炵幇鐨勬尝娴晥鏋滐紝鎬濊矾寰堟湁鎰忔€濄€傛垜浠厛浠庡畾绉垎寮€濮嬶紝瀹炵幇寮洸涓夎褰㈢殑闈㈢Н銆傚湪杩涘叆姝ｉ涔嬪墠锛屾垜浠厛鏉ョ湅鐪嬭繖涓€傚湪楂樼瓑鏁板涓紝鎴戜滑鍙互鐢ㄥ畾绉垎姹備簩娆″嚱鏁版洸绾胯竟鐨勯潰绉€傛垜浠彲浠ユ妸鏇茬嚎涓嬬殑闈㈢Н鍒嗘垚n涓粏闀跨殑闀挎柟褰€傚綋n鏃犻檺瓒嬭繎浜庢棤绌峰ぇ鏃讹紝鎵€鏈夌煩褰㈢殑闈㈢Н閮界瓑浜庢洸绾胯竟鍥惧舰鐨勯潰绉€備袱寮犵畝鍗曠殑绀烘剰鍥撅紝鍙栬嚜Whycanadefiniteintegralfindthearea?锛氬綋n鏃犻檺瓒嬭繎浜庢棤绌峰ぇ鏃讹紝鎵€鏈夌煩褰㈢殑闈㈢Н绛変簬寮у舰杈圭紭鍥惧舰鐨勯潰绉細鍒╃敤杩欎釜鎬濊矾锛屾垜浠篃鍙互鍦–SS涓€氳繃澶氫釜div妯℃嫙涓€涓姬褰㈣竟缂橈紝鍗充竴涓尝娴舰绾裤€係tep1.灏嗗浘褰㈠垏鍓叉垚澶氫釜閮ㄥ垎棣栧厛锛屾垜浠彲浠ュ畾涔変竴涓埗瀹瑰櫒锛岀埗瀹瑰櫒涓嬫湁12涓瓙div锛?divclass="g-container">

閫氳繃flex甯冨眬锛岀畝鍗曞竷灞€锛屽緱鍒拌繖鏍蜂竴涓浘褰紝姣忎釜瀛愬厓绱犵瓑楂橈細.g-container{width:200px;height:200px;border:2pxsolid#fff;display:flex;align-items:flex-end;}.g-item{flex-grow:1;height:60px;background-color:#fff;}鏁堟灉濡備笅锛歋tep2.璁╂瘡涓瓙鍏冪礌杩愯鍏锋湁涓嶅悓璐熷欢杩熷姩鐢荤殑楂樺害鍙樻崲鎺ヤ笅鏉ワ紝鍦ㄤ竴涓畝鍗曠殑鍙樻崲涓嬶紝鎴戜滑闇€瑕侀€氳繃鏀瑰彉姣忎釜瀛愬厓绱犵殑楂樺害鏉ヤ娇鍥惧儚鍔ㄧ敾锛?g-item{flex-grow:1;楂樺害锛?0px锛涜儗鏅壊锛?000锛涘姩鐢伙細heightChange1s鏃犻檺缂撳叆缂撳嚭浜ゆ浛锛泒@keyframesheightChange{from{height:60px;}鍒皗楂樺害锛?0px锛泒}鏁堟灉濡備笅锛氭帴涓嬫潵鍙渶瑕佸皢姣忎釜瀛愬厓绱犵殑鍔ㄧ敾椤哄簭璁剧疆涓轰笉鍚岀殑鏃堕棿璐熷欢杩熷氨鍙互浜嗭紝灏卞彲浠ュ緱鍒颁竴涓垵姝ョ殑娉㈡氮鏁堟灉銆傝繖閲屼负浜嗗噺灏戝伐浣滈噺锛屾垜浠娇鐢⊿ASS瀹炵幇锛?count:12;$speed:1s;.g-item{--f:#{$speed/-12};寮规€у闀匡細1锛涢珮搴︼細60px锛涜儗鏅壊锛?000锛涘姩鐢伙細heightChange$speedinfiniteease-in-outalternate;}@for$ifrom0to$count{.g-item:nth-child(#{$i+1}){animation-delay:calc(var(--f)*#{$i});}}@keyframesheightChange{浠巤楂樺害锛?0px;}鍒皗楂樺害锛?0px;}}杩欐牱锛屾垜浠氨寰楀埌浜嗕竴涓垵姝ョ殑娉㈡氮鏁堟灉锛歋tep3.Anti-aliasing鍙互鐪嬪埌锛屼笂闈㈡彁鍒扮殑娉㈡氮鍔ㄧ敾瀛樺湪涓€瀹氱殑閿娇锛屾帴涓嬫潵鎴戜滑瑕佸仛鐨勫氨鏄秷闄よ繖浜涢敮榻跨殑鏂规硶涓簃uchaspossible涓€锛氬鍔燿iv鐨勪釜鏁版寜鐓т竴寮€濮嬬敤瀹氱Н鍒嗘眰鏇茶竟鍥鹃潰绉殑鎬濊矾锛屾垜浠彧闇€瑕佸敖鍙兘鐨勫鍔爏ub-div鐨勪釜鏁?褰揹iv鐨勬暟閲忔棤闄愬ぇ鏃讹紝閿娇灏变細娑堝け銆傛垜浠彲浠ュ皾璇曟妸涓婇潰鐨?2涓猻ub-div鎹㈡垚120锛?20涓猟iv涓€涓竴涓啓澶垂鍔涗簡銆傝繖閲屾垜浠娇鐢≒ug妯℃澘寮曟搸锛歞iv.g-container-for(vari=0;i<120;i++)瀵逛簬div.g-item鐨凜SS浠ｇ爜锛屽彧闇€瑕佹敼鍙樺姩鐢诲欢杩熸椂闂达紝鍜?20涓猻ub-div鐨勮礋寤惰繜鎺у埗鍦?s浠ュ唴锛?/12--120$count:120;$speed:1s;.g-item{//娉ㄦ剰锛屽彧鏈夎繖涓敼鍙?-f:#{$speed/-120};寮规€у闀匡細1锛涢珮搴︼細60px锛涜儗鏅壊锛?000锛涘姩鐢伙細heightChange$speedinfiniteease-in-outalternate;}@for$ifrom0to$count{.g-item:nth-child(#{$i+1}){animation-delay:calc(var(--f)*#{$i});}}杩欐牱锛屾垜浠彲浠ュ緱鍒版洿骞虫粦鐨勬洸绾匡細鏂规硶浜岋細閫氳繃transform妯℃嫙寮у害锛歴kew()褰撶劧锛屽湪瀹為檯鎯呭喌涓嬶紝鐢ㄩ偅涔堝div澶氮璐逛簡锛屾墍浠ユ湁娌℃湁鍒殑鍔炴硶鍦╠iv鏁伴噺姣旇緝灏戠殑鎯呭喌涓嬪敖閲忔秷闄よ蛋鏍凤紵杩欓噷锛屾垜浠彲浠ュ皾璇曞湪杩愬姩鍙樻崲杩囩▼涓粰瀛愬厓绱犳坊鍔犱笉鍚岀殑transform:skewY()鏉ユā鎷熷姬搴︺€傚啀娆′慨鏀逛唬鐮侊紝鎴戜滑闄嶄綆div涓暟锛岀粰姣忎釜瀛恉iv娣诲姞涓€涓猼ransform:skewY()鐨勫姩鐢绘晥鏋滐細div.g-container-for(vari=0;i<24;i++)div瀹屾垚.g-item鐨凜SS浠ｇ爜濡備笅锛?count:24;$speed:1s;.g-item{//娉ㄦ剰鍙湁杩欎釜鍙樹簡--f:#{$speed/-24};寮规€у闀匡細1锛涢珮搴︼細60px锛涜儗鏅壊锛?000锛涘姩鐢伙細heightChange$speedinfiniteease-in-outalternate,skewChange$speedinfiniteease-in-outalternate;}@for$ifrom0to$count{.g-item:nth-child(#{$i+1}){鍔ㄧ敾寤惰繜:calc(var(--f)*#{$i}),calc(var(--f)*#{$i}-#{$speed/2});}}@keyframesheightChange{鏉ヨ嚜{height:var(--h);}鍒皗楂樺害锛氳绠楋紙var锛?-h锛?30px锛?}}@keyframesskewChange{鏉ヨ嚜{transform:skewY(20deg);}鍒皗鍙樻崲锛氬亸鏂滐紙-20deg锛夛紱}}涓轰簡鏂逛究鐞嗚В锛屾垜浠厛鏉ョ湅楂樺害鍙樻崲鍔ㄧ敾涓€鑷存椂娣诲姞skewY()鐨剆ub-div鐨勫彉鎹€傚伐浣滃師鐞嗭細鍙互鐪嬪嚭姣忔鍙樻崲閮芥湁鏄庢樉鐨勭獊鍑洪敮榻匡紝鍙犲姞寤惰繜鐨勯珮搴﹀彉鎹㈠彲浠ユ秷闄ゅぇ閮ㄥ垎鐨勯敮榻挎晥鏋滐細鑷虫锛屾垜浠張寰楀埌浜嗕竴涓腑绛夋暟閲忕殑div鎶楅敮榻跨殑鏂规硶锛佷互涓婃墍鏈夋晥鏋滅殑瀹屾暣浠ｇ爜锛屾偍鍙互鐐瑰嚮杩欓噷Li:CodePen--PureCSSWaveEffectsmixeduse鏈€鍚庯紝鎴戜滑鍙互閫氳繃璋冩暣鍑犱釜鍙彉鍙傛暟鏉ョ粍鍚堝嚑绉嶄笉鍚岀殑娉㈡氮鏁堟灉锛屽緱鍒颁竴浜涚粍鍚堟晥鏋滐紝涔熷緢涓嶉敊銆傜被浼间簬杩欎釜锛欳odePen--PureCSSWaveEffects2鍩轰簬姝わ紝鎴戞兂鍒颁簡鎴戜滑鍏徃锛圫hopee锛夌殑姣嶅叕鍙窼eaGroup鐨凩OGO锛屽畠鐪嬭捣鏉ュ涓嬶細浣跨敤鏈枃涓殑瑙ｅ喅鏂规瀹炵幇鍔ㄦ€丩OGOanimationforit:CodePenDemo--PureCSSWave-SeaGroupLogo缂虹偣杩欎釜鏂规鐨勭己鐐硅繕鏄緢鏄庢樉鐨勶細棣栧厛鏄涪寮冧簡div锛岄渶瑕佹洿澶氱殑div鎵嶈兘杈惧埌鏁堟灉锛岃€屼笖div瓒婂鏁堟灉瓒婂ソ.褰撶劧锛屽鏋滃鍔犲埌涓€瀹氱▼搴︼紝鍗￠】鍦ㄦ墍闅惧厤锛岄敮榻挎劅涔熸棤娉曞畬鍏ㄦ秷闄わ紝杩欐墠鏄渶鑷村懡鎴栬€呰鐪熸鑳芥淳涓婄敤鍦虹殑鍦版柟銆傚綋鐒讹紝杩欑瘒鏂囩珷鐨勭洰鐨勬洿澶氱殑鏄紑鎷撴€濊矾锛岃璁鸿繖绉嶆柟娉曠殑浼樼己鐐癸紝瀹炵幇鍔ㄧ敾鐨勫叏杩囩▼锛屽姩鐢昏礋寤惰繜鏃堕棿鐨勫簲鐢ㄦ湁涓€瀹氱殑鍙傝€冨涔犳剰涔夈€侰SS杩樻槸寰堟湁鎰忔€濈殑~馃鏈€鍚庯紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鎴樼嚎-瀹岀粨杞朵簨馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂颁腑銆傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>

上一篇：关于SASS的一些思考

下一篇：最流行的前端UI框架

使用CSS制作波浪效果的妙招相关文章

最新推荐

猜你喜欢