css: normalize.css
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>happy 2022</title> <meta name="Description" content="geovindu"/> <meta name="Keywords" content="geovindu"/> <meta name="author" content="geovindu"/> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@900&display=swap" rel="stylesheet" /> <link href="css/normalize.min.css" rel="stylesheet"/> <style type="text/css"> @charset "UTF-8"; /** Check it out in Full page view 😄 **/ :root { --background-color: #f2bdbb; --year-color: #eb8258; --year-text-shadow: 10px 0px 0px rgba(219, 80, 74,1); --year-change-text-shadow: 10px 0px 0px rgba(70, 153, 218, 1); --greeting-text-shadow: 5px 0px 0px rgba(70, 153, 218, 1); --year-change-color: #84dbf7; --year-change-background-color: #072852; } * { box-sizing: border-box; } body, div, p { margin: 0; padding: 0; } body { background-color: var(--background-color); height: 100vh; width: 100%; font-family: "Work Sans", sans-serif; animation: changeBg 0.5s ease-in-out 3.5s 1 normal forwards; overflow: hidden; } /*https://www.svgbackgrounds.com/how-to-add-svgs-with-css-background-image/*/ .header, .footer { position: absolute; opacity: 0; background-image: url("39.svg"); /*background-image: url("data:image/svg+xml,%3Csvg width='206' height='53' viewBox='0 0 206 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='206' height='53' fill='%23072852'/%3E%3Ccircle cx='26.5' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='26.5' cy='24.2917' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='24.2917' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='35.3333' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='39.75' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Ccircle cx='13.25' cy='13.25' r='4.41667' fill='%2300539F'/%3E%3Cpath d='M108.625 32.0208L113.95 21.37C114.577 20.1161 116.266 19.8795 117.214 20.9129L125.365 29.8054C126.33 30.8585 128.057 30.5892 128.655 29.2921L132.457 21.0546C133.126 19.6052 135.14 19.485 135.976 20.8445L140.608 28.3716C141.498 29.8178 143.672 29.5669 144.209 27.9558L147.271 18.7708' stroke='%2300539F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M68.6667 18.2976L76.3958 24.2917M84.125 30.9167L76.3958 24.2917M76.3958 24.2917L68.6667 30.9167L84.125 17.6667' stroke='%2300539F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M164.77 31.5208L177.292 9.83334L189.813 31.5208H164.77Z' stroke='%230B4A99'/%3E%3Cpath d='M182.812 11.0417L197.156 34.2292H168.469L182.812 11.0417Z' fill='%2300539F'/%3E%3C/svg%3E%0A")*/ ; } .header { top: 0; left: 0; height: 25%; width: 20%; animation: revealheader 0.5s ease-in-out 4s 1 normal forwards; } .footer { height: 35%; width: 40%; bottom: 0; right: 0; animation: revealfooter 0.5s ease-in-out 4s 1 normal forwards; } .container { height: 100vh; } .container .current-year { position: absolute; width: 100vw; height: 100%; transition: all 0.5s; } .current-year { position: relative; } .current-year .year { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 300px; text-align: center; color: var(--year-color); } .current-year .year::before { content: "Happy"; font-size: 7em; position: absolute; top: -100px; left: 20%; margin: 0 auto; opacity: 0; color: var(--year-change-color); text-shadow: var(--greeting-text-shadow); animation: fadeIn 0.5s ease-in-out 3.5s 1 normal forwards; } .current-year .year span { display: inline-block; position: relative; font-size: 20em; text-shadow: var(--year-text-shadow); z-index: 10; } .current-year .year span:nth-child(1) { animation: jump 0.75s ease-in-out 3.6s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards; } .current-year .year span:nth-child(2) { animation: jump 0.75s ease-in-out 3.4s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards; } .current-year .year span:nth-child(3) { animation: jump 0.75s ease-in-out 3.2s infinite normal forwards, color 0.75s ease-in-out 3.5s 1 normal forwards; } .current-year .year span:nth-child(4) { animation: jump 0.5s ease-in-out 0.2s infinite normal forwards, fadeOut 1s ease-in-out 3s 1 normal forwards; position: relative; } .current-year .year span:last-child { display: inline-block; position: relative; opacity: 0; animation: jumpNewYear 1s ease-in-out 3s 1 normal forwards, jumpY 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards; } @keyframes jump { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 75% { transform: translateY(20px); } 100% { transform: translateY(0px); } } @keyframes jumpNewYear { 0% { opacity: 1; transform: scale(0.3) translateY(-200px) translateX(-200px); } 100% { transform: scale(1) translateY(0px) translateX(-200px); opacity: 1; } } @keyframes jumpNewYearSm { 0% { opacity: 1; transform: scale(0.3) translateY(-200px) translateX(-100px); } 100% { transform: scale(1) translateY(0px) translateX(-100px); opacity: 1; } } @keyframes jumpNewYearXs { 0% { opacity: 1; transform: scale(0.3) translateY(-200px) translateX(-80px); } 100% { transform: scale(1) translateY(0px) translateX(-80px); opacity: 1; } } @keyframes jumpY { 0% { transform: translateX(-200px) translateY(0px); } 50% { transform: translateX(-200px) translateY(-20px); } 75% { transform: translateX(-200px) translateY(20px); } 100% { transform: translateX(-200px) translateY(0px); } } @keyframes jumpYSm { 0% { transform: translateX(-100px) translateY(0px); } 50% { transform: translateX(-100px) translateY(-20px); } 75% { transform: translateX(-100px) translateY(20px); } 100% { transform: translateX(-100px) translateY(0px); } } @keyframes jumpYXs { 0% { transform: translateX(-80px) translateY(0px); } 50% { transform: translateX(-80px) translateY(-20px); } 75% { transform: translateX(-80px) translateY(20px); } 100% { transform: translateX(-80px) translateY(0px); } } @keyframes fadeOut { 0% { transform: scale(1) translateY(0px); } 100% { transform: scale(0) translateY(600px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes color { 0% { color: var(--year-color); text-shadow: var(--year-text-shadow); } 100% { color: var(--year-change-color); text-shadow: var(--year-change-text-shadow); } } @keyframes changeBg { 0% { background-color: var(--background-color); } 100% { background-color: var(--year-change-background-color); } } @keyframes revealheader { 0% { transform: translateY(-50px); opacity: 1; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes revealfooter { 0% { transform: translateY(50px); opacity: 1; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes blink { 0% { opacity: 0.5; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0); } } .snowflake-grid { display: inline-grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 50px; gap: 5px; opacity: 0; width: 100px; transform: scale(0.4); } .snowflake-grid div { border-radius: 5px; } .snowflake-grid .snowflake-item { position: relative; } .to-left { position: absolute; top: 5%; left: 35%; animation: swing 3s ease-in-out 4.5s infinite; } .to-left div { animation: flash 3s ease-in-out 4.5s infinite; } .to-right { position: absolute; top: 35%; right: 15%; animation: swing 2.5s ease-in-out 4s infinite; } .to-right div { animation: flash 2.5s ease-in-out 4s infinite; } .border-left { border-left: 4px solid #e6dada; } .border-right { border-right: 4px solid #e6dada; } .border-bottom { border-bottom: 4px solid #e6dada; } .border-top { border-top: 4px solid #e6dada; } .sub-items { height: 28px; width: 28px; } .m-w-15 { width: 15px; } .m-h-15 { height: 15px; } .r-270 { transform: rotate(270deg); } .r-180 { transform: rotate(180deg); } .r-90 { transform: rotate(90deg); } .pull-down { position: absolute; bottom: 5px; right: 5px; } .pull-down-right { position: absolute; bottom: 5px; left: 5px; } .pull-right { position: absolute; right: 5px; top: 5px; } .pull-left { position: absolute; left: 5px; top: 5px; } .m-3 { margin: 3px; } @keyframes swing { 0% { opacity: 0.5; } 50% { transform: rotateZ(20deg) scale(0.4); opacity: 1; } 100% { opacity: 0.5; } } @keyframes flash { 50% { border-color: #e7e9eb; } } .circles { width: 20px; height: 20px; border-radius: 50%; position: absolute; opacity: 0; } .bottom-left.circles { bottom: 5%; left: 5%; animation: colorSwitcher 2s ease 4.5s infinite; } .circles.top-right { top: 25%; right: 45%; animation: colorSwitcher 1.5s ease 5.5s infinite; } @keyframes colorSwitcher { 0% { opacity: 1; background: #642b73; background: -webkit-linear-gradient(to right, #c6426e, #642b73); background: linear-gradient(to right, #c6426e, #642b73); } 50% { opacity: 1; background: #add100; background: -webkit-linear-gradient(to right, #7b920a, #add100); background: linear-gradient(to right, #7b920a, #add100); } 100% { opacity: 1; background: #11998e; background: -webkit-linear-gradient(to right, #38ef7d, #11998e); background: linear-gradient(to right, #38ef7d, #11998e); } } .star { width: 70px; height: 70px; border: 1px solid white; background-color: white; opacity: 0; } .star div { border: 1px solid var(--year-change-background-color); background-color: var(--year-change-background-color); position: absolute; width: 80%; height: 80%; border-radius: 50%; } .star .top { top: -18px; left: -16px; } .star .right { top: -18px; right: -17px; } .star .bottom { bottom: -15px; right: -15px; } .star .left { bottom: -14px; left: -17px; } .star.top-right { position: absolute; top: 10%; right: 15%; animation: blink 2s ease-in-out 5s infinite normal forwards; background: #ee9ca7; background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7); background: linear-gradient(to right, #ffdde1, #ee9ca7); } .star.bottom-left { position: absolute; top: 60%; left: 10%; animation: blink 1.5s ease-in-out 6s infinite normal forwards; background-color: #d39e0b; } .star.bottom-center { position: absolute; bottom: 10%; left: 40%; animation: blink 1s ease-in-out 5.5s infinite normal forwards; background: #f953c6; background: -webkit-linear-gradient(to right, #b91d73, #f953c6); background: linear-gradient(to right, #b91d73, #f953c6); } @media (max-width: 900px) { .current-year .year { height: 200px; } .current-year .year span { font-size: 12em; } .current-year .year span:last-child { display: inline-block; position: relative; opacity: 0; animation: jumpNewYearSm 1s ease-in-out 3s 1 normal forwards, jumpYSm 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards; } } @media (max-width: 767px) { .current-year .year { height: 150px; } .current-year .year::before { left: 5%; font-size: 5em; } .current-year .year span { font-size: 7em; } .current-year .year span:last-child { display: inline-block; position: relative; opacity: 0; animation: jumpNewYearXs 1s ease-in-out 3s 1 normal forwards, jumpYXs 0.75s ease-in-out 4s infinite normal forwards, color 0.5s ease-in-out 3.5s 1 normal forwards; } .snowflake-grid.to-right { display: none; } .header, .footer { width: 100%; height: 14%; z-index: 20; } .snowflake-grid.to-left { top: 16%; left: 15%; } .star.bottom-center { left: unset; right: 5%; bottom: 15%; } .star.top-right { top: 14%; } } </style> </head> <body> <div class="header"></div> <div class="container"> <div class="circles bottom-left"></div> <div class="circles top-right"></div> <div class="star top-right"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> </div> <div class="star bottom-left"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> </div> <div class="star bottom-center"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> </div> <div class="snowflake-grid to-left"> <div class="snowflake-item border-bottom border-right"> <div class="sub-items border-right border-bottom pull-down"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-bottom border-left"> <div class="sub-items border-right border-bottom r-90 pull-down-right"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-top border-right"> <div class="sub-items border-right border-bottom r-270 pull-right"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-top border-left"> <div class="sub-items border-right border-bottom r-180 pull-left"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> </div> <div class="snowflake-grid to-right"> <div class="snowflake-item border-bottom border-right"> <div class="sub-items border-right border-bottom pull-down"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-bottom border-left"> <div class="sub-items border-right border-bottom r-90 pull-down-right"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-top border-right"> <div class="sub-items border-right border-bottom r-270 pull-right"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> <div class="snowflake-item border-top border-left"> <div class="sub-items border-right border-bottom r-180 pull-left"> <div class="m-w-15 m-h-15 border-right border-bottom m-3"></div> </div> </div> </div> <div class="current-year"> <div class="year"><span>2</span><span>0</span><span>2</span><span>1</span><span>2</span></div> </div> </div> <div class="footer"></div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>2022新年快乐网页动画特效</title> <meta name="Description" content="geovindu"/> <meta name="Keywords" content="geovindu"/> <meta name="author" content="geovindu"/> <style type="text/css"> body { justify-content: center; align-items: center; display: flex; background-color: #000; height: 100vh; } .newyear { position: relative; } .numbers { position: relative; display: inline-flex; font-size:100px; font-weight: bold; font-family: Verdana, sans-serif; letter-spacing:20px; } .first { color: #00509d; text-shadow: 2px 2px 0 #ffd500; } .first:before { content:""; position: absolute; background-color: #00509d; height:15px; width:3px; left:35px; top:12px; } .first:after { content:""; position: absolute; background-color: #00509d; width:20px; height:10px; border-radius: 0 0 30px 30px; left:27px; top:2px; } .second { color: #fdc500; text-shadow: 2px 2px 0 #70e000; } .second:before { content:""; position: absolute; background-color: #fdc500; height:15px; width:3px; left:125px; top:12px; } .second:after { content:""; position: absolute; background-color: #fdc500; width:20px; height:10px; border-radius: 0 0 30px 30px; left:117px; top:2px; } .third { color: #ff477e; text-shadow: 2px 2px 0 #70e000; } .third:before { content:""; position: absolute; background-color: #ff477e; height:15px; width:3px; left:217px; top:12px; } .third:after { content:""; position: absolute; background-color: #ff477e; width:20px; height:10px; border-radius: 0 0 30px 30px; left:209px; top:2px; } .fourth { color: #e9ff70; text-shadow: 2px 2px 0 #ff0a54; } .fourth:before { content:""; position: absolute; background-color: #e9ff70; height:15px; width:3px; left:309px; top:13px; } .fourth:after { content:""; position: absolute; background-color: #e9ff70; width:20px; height:10px; border-radius: 0 0 30px 30px; left:301px; top:3px; } .text { position: absolute; left:86px; font-size: 30px; font-family: 'Brush Script MT', cursive; color: white; text-shadow: 1px 1px 0 #9ef01a; } .fireworks { position: absolute; } .spark1, .spark2, .spark3, .spark4, .spark5, .spark6 { position: absolute; background-color: #fee440; border-radius:50%; top:-9px; z-index:-1; } .spark1 { width: 8px; height:8px; left:30px; top:-9px; animation: fire 0.9s ease-in-out infinite, color 0.4s linear infinite; } .spark1:before { content:""; position: absolute; width:5px; height:5px; top:8px; left:11px; background-color: #fee440; border-radius:50%; } .spark2 { width: 9px; height:9px; left:33px; top:-5px; animation: fire2 0.28s ease-in-out infinite, color 0.4s linear infinite; } .spark2:before { content:""; position: absolute; width:5px; height:5px; top:12px; left:3px; background-color: #fee440; border-radius:50%; } .spark3 { width: 8.5px; height:8.5px; left:33px; top:-5px; animation: fire3 0.36s ease-in-out infinite, color2 0.4s linear infinite; } .spark3:before { content:""; position: absolute; width:5px; height:5px; top:12px; left:-1px; background-color: #fee440; border-radius:50%; } .spark4 { width: 7px; height:7px; left:27px; top:-5px; animation: fire2 0.24s ease-in-out infinite, color2 0.2s linear infinite; } .spark5 { width: 7px; height:7px; left:29px; top:-5px; animation: fire3 0.45s ease-in-out infinite, color3 0.2s linear infinite; } .spark6 { width: 6px; height:6px; left:29px; top:-5px; animation: fire 0.35s ease-in-out infinite, color3 0.2s linear infinite; } .spark6 { width: 7.5px; height:7.5px; left:35px; top:-5px; animation: fire2 0.35s ease-in-out infinite, color3 0.2s linear infinite; } @keyframes fire3 { 100% { transform:translateX(20px) translateY(-73px); opacity: 0.3; } } @keyframes fire2 { 100% { transform:translateX(-5px) translateY(-70px); opacity: 0.3; } } @keyframes fire { 100% { transform:translateX(-25px) translateY(-75px); opacity: 0.3; } } @keyframes color { from {background-color: #d00000;} to {background-color: #0081a7;} } @keyframes color2 { from {background-color: #8cff00;} to {background-color: #1d2d44;} } @keyframes color3 { from {background-color: #d81159;} to {background-color: #1be7ff;} } .fireworks2 { position: absolute; left:90px; } .fireworks3 { position: absolute; left:182px; } .fireworks4 { position: absolute; left:275px; } </style> </head> <body> <div class="newyear"> <div class="numbers"> <div class="first">2</div> <div class="fireworks"> <div class="spark1"></div> <div class="spark2"></div> <div class="spark3"></div> <div class="spark4"></div> <div class="spark5"></div> <div class="spark6"></div> </div> <div class="second">0</div> <div class="fireworks2"> <div class="spark1"></div> <div class="spark2"></div> <div class="spark3"></div> <div class="spark4"></div> <div class="spark5"></div> <div class="spark6"></div> </div> <div class="third">2</div> <div class="fireworks3"> <div class="spark1"></div> <div class="spark2"></div> <div class="spark3"></div> <div class="spark4"></div> <div class="spark5"></div> <div class="spark6"></div> </div> <div class="fourth">2 </div> <div class="fireworks4"> <div class="spark1"></div> <div class="spark2"></div> <div class="spark3"></div> <div class="spark4"></div> <div class="spark5"></div> <div class="spark6"></div> </div> </div> <div class="text">Happy New Year!</div> </div> </body> </html>
<!--Scalable Vector Graphic geovindu 39.svg --> <svg width='206' height='53' viewBox='0 0 206 53' fill='none' xmlns='http://www.w3.org/2000/svg'> <circle cx='26.5' cy='13.25' r='4.41667' fill='#00539F'/> <circle cx='26.5' cy='24.2917' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='24.2917' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='35.3333' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='13.25' r='4.41667' fill='#00539F'/> <circle cx='13.25' cy='13.25' r='4.41667' fill='#00539F'/> <path d='M108.625 32.0208L113.95 21.37C114.577 20.1161 116.266 19.8795 117.214 20.9129L125.365 29.8054C126.33 30.8585 128.057 30.5892 128.655 29.2921L132.457 21.0546C133.126 19.6052 135.14 19.485 135.976 20.8445L140.608 28.3716C141.498 29.8178 143.672 29.5669 144.209 27.9558L147.271 18.7708' stroke='#00539F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/> <path d='M68.6667 18.2976L76.3958 24.2917M84.125 30.9167L76.3958 24.2917M76.3958 24.2917L68.6667 30.9167L84.125 17.6667' stroke='#00539F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/> <path d='M164.77 31.5208L177.292 9.83334L189.813 31.5208H164.77Z' stroke='#0B4A99'/> <path d='M182.812 11.0417L197.156 34.2292H168.469L182.812 11.0417Z' fill='#00539F'/> </svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!--39.xml svg/xml file geovindu---> <svg width='206' height='53' viewBox='0 0 206 53' fill='none' xmlns='http://www.w3.org/2000/svg'> <rect width='206' height='53' fill='#3072852'/> <circle cx='26.5' cy='13.25' r='4.41667' fill='#00539F'/> <circle cx='26.5' cy='24.2917' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='24.2917' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='35.3333' r='4.41667' fill='#00539F'/> <circle cx='39.75' cy='13.25' r='4.41667' fill='#00539F'/> <circle cx='13.25' cy='13.25' r='4.41667' fill='#00539F'/> <path d='M108.625 32.0208L113.95 21.37C114.577 20.1161 116.266 19.8795 117.214 20.9129L125.365 29.8054C126.33 30.8585 128.057 30.5892 128.655 29.2921L132.457 21.0546C133.126 19.6052 135.14 19.485 135.976 20.8445L140.608 28.3716C141.498 29.8178 143.672 29.5669 144.209 27.9558L147.271 18.7708' stroke='#00539F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/> <path d='M68.6667 18.2976L76.3958 24.2917M84.125 30.9167L76.3958 24.2917M76.3958 24.2917L68.6667 30.9167L84.125 17.6667' stroke='#00539F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/> <path d='M164.77 31.5208L177.292 9.83334L189.813 31.5208H164.77Z' stroke='#0B4A99'/> <path d='M182.812 11.0417L197.156 34.2292H168.469L182.812 11.0417Z' fill='#00539F'/> </svg>
https://github.com/lvming6816077/H5FullscreenPage
https://www.npmjs.com/package/animate.css/v/3.7.0
https://github.com/animate-css/animate.css
https://github.com/Angelial/yearCss
https://zeptojs.com/
https://www.zeptojs.com.cn/
https://github.com/madrobby/zepto
https://github.com/necolas/normalize.css/
https://github.com/cdnjs/cdnjs
ChatGPT
https://github.com/acheong08/ChatGPT
https://gpt3demo.com/apps/chatgpt
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)