HTML制作的3D漫天樱花和浪漫信封

时间：2023-03-27 11:24:16 JavaScript

馃寠浣滆€呬富椤碉細娴峰媷馃寠浣滆€呯畝浠嬶細馃弳CSDN鍏ㄦ爤棰嗗煙浼樿川鍒涗綔鑰咃紝馃HDZ鏍稿績鍥㈤槦鎴愬憳馃寠绮変笣绂忓埄锛氿煈夌矇涓濆洟馃憟姣忓懆閫?-9鏈功锛屽悇绉嶅皬绀肩墿锛堝巻灞婅幏濂栬褰曪級锛屼笉瀹氭湡涓婄嚎demohttps://www.bilibili.com/video...馃挄娴极淇″皝锛歨ttps://haiyong.site/demo/eluvletter/馃拰3D婕ぉ椋炶垶鐨勬ū鑺憋細https://haiyong.site/demo/yinghua.html馃寠鍏紬鍙枫€愭捣姘搞€戝洖澶嶃€愭ū鑺便€戣幏鍙栧畬鏁存簮鐮侊紒馃挄娴极淇″皝HTML鍐呭

鑷存槑

缈昏浆

鍏抽棴

缈昏浆閮ㄥ垎CSS#letter{鑳屾櫙锛?fafafa;瀹藉害锛?0%锛涢珮搴︼細95%锛涗綅缃細缁濆锛涘乏锛?%锛涘墠5锛?z-绱㈠紩锛?锛?webkit-杩囨浮锛?5s.5s锛?moz-杩囨浮锛?5s.5s锛?o-杞崲锛?s0s锛涜繃娓★細0s0s锛泒#content:target#letter{椤堕儴锛?40%锛?o-杩囨浮锛?5s.5s锛涜繃娓:.5s.5s;}#letter.container{浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00%锛?*楂樺害:50%;*/-webkit-perspective:800px;-moz-perspective:800px;瑙嗚锛?00px锛涢《閮細0锛涘乏锛?锛?webkit-杩囨浮锛?s0s锛?moz-杩囨浮锛?s0s锛涜繃娓★細0s0s锛泎-绱㈠紩锛?锛泒#letter.flip{瀹藉害锛?00%锛涢珮搴︼細100%锛泒#letter.flip{浣嶇疆锛氱粷瀵癸紱-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;鍙樻崲鏍峰紡锛氫繚鐣?d锛?webkit-transition:-webkit-transform0.5s0s;-moz-transition:-moz-transform0.5s0s;杩囨浮锛?moz-transform0.5s0s锛?webkit-transform-origin锛氬乏涓婏紱-moz-transform-origin锛氬乏涓婏紱鍙樻崲鍘熺偣锛氬乏涓婏紱}#letter.flip>.front,#letter.flip>.back{浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00%锛涢珮搴︼細100%锛?webkit-backface-visibility锛氶殣钘忥紱-moz-backface-visibility锛氶殣钘忥紱鑳岄潰鍙鎬э細闅愯棌锛泒#letter.flip>.杩斿洖{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);鍙樻崲锛氭棆杞琗锛?80搴︼級锛泒#content:target#letter.flip{-webkit-transform:rotateX(180deg);moz鍙樻崲锛歳otateX(180deg)锛涘彉鎹細鏃嬭浆X锛?80搴︼級锛?webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;1绉掞紱-moz-transition-delay:1s;杞崲寤惰繜锛?s锛泒letter.jsvarapart=false;$("#open").click(function(){if(!aparted){vartyped=newTyped('.letter',{strings:["^1000DearMing","M^200ing

^300鎬绘槸鍦ㄦ櫄涓奮200瀵掑喎锛宆600锛屼絾濡傛灉浣犳彙浣?00鎵媈200锛屼綘浼氬緱鍒?00娓╂殩^200锛?br>澶氫箞瀵掑喎鐨勫鏅氾紒浣嗗鏋滀綘鍜?00鍦ㄤ竴璧凤紝600涓€鐐归兘涓嶅喎锛?lt;br>
^1000H^200ao

"],typeSpeed:100,backSpeed:50});$('#open').find("span").eq(0).css('background-position',"0-150px");aparted=true;varmusic=document.getElementById('music2');if(music.paused){music.play();$('#music_btn2').css(鈥滀笉閫忔槑搴︹€?鈥?鈥?;}}});functionplayPause(){varmusic=document.getElementById('music2');varmusic_btn=$('#music_btn2');if(music.paused){music.play();music_btn.css("opacity","1");}else{music.pause();music_btn.css("opacity","0.2");}}window.onload=function(){varcurrentUrl=window.location.href;varfirstIndex=currentUrl.indexOf("#");if(firstIndex<=0)window.location.href=currentUrl+"#contact";$('#music2').attr('src',bgmsrc);document.addEventListener('touchstart',function(event){if(event.touches.length>1)event.preventDefault();});varlastTouchEnd=0;document.addEventListener('touchend',function(event){varnow=(newDate()).getTime();if(now-lastTouchEnd<=300)event.preventDefault();lastTouchEnd=now;},false);document.addEventListener('gesturestart',function(event){event.preventDefault();});$('姝ｆ枃').css('涓嶉€忔槑搴?,'1');$('#jsi-cherry-container').css('z-index','-99');}婕旂ず鍥攫煉曟氮婕俊灏佸湪绾挎紨绀哄湴鍧€锛歨ttp://haiyong.site/eluvletter馃拰3D妯辫姳椋炶垶HTML鍐呭

鐢?/span>CSS鍐呭姝ｆ枃{padding:0;淇濊瘉閲戯細0锛涙孩鍑猴細闅愯棌锛涢珮搴︼細600px锛泒鐢诲竷{濉厖锛?锛涗繚璇侀噾锛?锛泒div.btnbg{浣嶇疆锛氬浐瀹氾紱宸︼細0锛泃op:0;}.page-footer{浣嶇疆锛氬浐瀹氾紱鍙筹細0锛涘簳閮細20px锛涙樉绀猴細寮规€э紱瀵归綈椤圭洰锛氬眳涓紱濉厖锛?px锛涢鑹诧細榛戣壊;鑳屾櫙锛歳gba(255,255,255,0.65);}.page-footera{display:flex;margin-left:4px;}.touchiang{width:24px;height:24px;}閮ㄥ垎JS鍐呭婕旂ず鍥剧墖馃拰3D妯辫姳椋炲ぉ鍦ㄧ嚎婕旂ず鍦板潃锛歨ttp://haiyong.site/yinghuaHTML5鍒朵綔婕ぉ椋炶垶鐨?D妯辫姳鍜屾氮婕殑淇″皝銆愪唬鐮併€戝鏋滃湪澶嶅埗涓婇潰浠ｇ爜鐨勬椂鍊欓亣鍒伴棶棰樻瘮杈冨洶闅撅紝鍙互閫氳繃浠ヤ笅鏂瑰紡鍒涘缓杩欎釜椤圭洰锛?D妯辫姳澶╃┖涓鑸炵殑鑺辨湹鍜屼娇鐢╦avascript鐨勬氮婕俊灏侊級鏈夊緢澶氬垵瀛﹁€呮棤娉曞皢鎵€鏈夎繖浜涗唬鐮佹斁鍦ㄤ竴璧峰浜庝粬浠潵璇达紝鎴戝凡缁忓皢鎵€鏈変唬鐮佹斁鍦ㄤ竴璧枫€傚叧娉ㄥ叕浼楀彿[娴峰媷]鍥炲[妯辫姳]鑾峰彇婧愮爜銆傚笇鏈涢€氳繃鏈暀绋嬶紝浣犱篃鍙互浣跨敤HTML5鍒朵綔3D婕ぉ椋炶垶鐨勬ū鑺卞拰娴极鐨勪俊灏併€備綔鑰呯珛蹇楁墦閫犱竴涓嫢鏈?00娆惧皬娓告垙/宸ュ叿鐨勬懜楸肩綉绔欍€傛洿鏂拌繘搴︼細50/100鐢℉TML5鍒朵綔婕ぉ椋炶垶鐨?D妯辫姳鍜屾氮婕殑淇″皝銆傚枩娆㈤€氳繃鏂囩珷鍒嗕韩鎶€鏈拰蹇箰銆備綘鍙互璁块棶鎴戠殑鍗氬锛歨ttps://segmentfault.com/u/haiyong浜嗚В鏇村銆傚笇鏈涗綘浠枩娆紒馃槉馃拰娆㈣繋澶у鍦ㄨ瘎璁哄尯鎻愬嚭鑷繁鐨勬剰瑙佸拰寤鸿锛侌煉?/p>

上一篇：一个写了15万字55篇文章的前端程序员，辞职一年！

下一篇：Vue实现无限树选择器（无第三方依赖）

HTML制作的3D漫天樱花和浪漫信封相关文章