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

 

 

posted @ 2022-12-04 12:19  ®Geovin Du Dream Park™  阅读(23)  评论(0)  编辑  收藏  举报