2022年元旦过去了，现在就盼着春节的到来啦。 2022年的春节是农历2月1日，即大年初一，这一天星期二。除夕则是在2022年1月31日，农历腊月廿九，星期一。在春节即将到来之时二郎素材网给大家整理了一款简单创意的2022新年祝福网页效果，从颜色到设计每个细节都搭配的很棒。 主要结构是用块元素和css拼装组成，并没有用到js和其他复杂代码。
主要html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2022新年快乐</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
::-webkit-scrollbar {
display: none;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(270.62deg, #190C42 0.64%, #2D016C 99.66%);
}
.wrapper {
display: flex;
width: 740px;
}
.wrapper p {
font-family: "Josefin Sans", serif;
position: absolute;
left: 50%;
bottom: calc(35vh - 60px);
transform: translate(-50%, -50%);
color: #fff;
font-weight: 500;
font-size: 32px;
letter-spacing: 2px;
}
.wrapper p:before, .wrapper p:after {
content: "";
width: 80px;
height: 2px;
background: #fff;
}
.wrapper p:before {
position: absolute;
top: 40%;
left: -86px;
transform: translate(, );
}
.wrapper p:after {
position: absolute;
top: 40%;
right: -86px;
transform: translate(, );
}
.wrapper ul {
margin-right: 10px;
}
.wrapper .two {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.wrapper .two li {
width: 60px;
height: 60px;
}
.wrapper .two li:nth-child(1) {
background: #fff;
border-radius: 90px 0 0 0;
}
.wrapper .two li:nth-child(2) {
background: linear-gradient(270deg, #4481FF 0.12%, #93DEFF 100.12%);
}
.wrapper .two li:nth-child(3) {
border-radius: 0 90px 0 0;
background: #E445FF;
}
.wrapper .two li:nth-child(5) {
border-radius: 50%;
background: linear-gradient(300.33deg, #FF9E37 16.32%, #FFEA29 82.66%);
}
.wrapper .two li:nth-child(6) {
border-radius: 0 0 90px 0;
background: #E445FF;
}
.wrapper .two li:nth-child(7) {
border-radius: 90px 0 0 0;
background: linear-gradient(256.56deg, #427FFF 9.64%, #93DFFF 89.99%);
}
.wrapper .two li:nth-child(8) {
background: linear-gradient(270deg, #4A0179 0.12%, #801FFB 94.29%);
}
.wrapper .two li:nth-child(9) {
background: #fff;
}
.wrapper .zero {
display: flex;
}
.wrapper .zero li:nth-child(1) {
height: 180px;
width: 90px;
border-radius: 90px 0 0 90px;
background: linear-gradient(271.31deg, #FF880B 4.79%, #FFEC66 97.81%);
}
.wrapper .zero li {
display: flex;
flex-direction: column;
}
.wrapper .zero li span {
width: 90px;
height: 90px;
}
.wrapper .zero li span:nth-child(1) {
background: #fff;
border-radius: 0 90px 0 0;
}
.wrapper .zero li span:last-child {
background: linear-gradient(223.99deg, #7E1EF9 5.01%, #84058F 68.36%);
border-radius: 0 0 90px 0;
}
.wrapper .one {
margin-left: 33px;
}
.wrapper .one li {
width: 60px;
height: 60px;
}
.wrapper .one li:first-child {
border-radius: 0 90px 0 0;
background: linear-gradient(316.64deg, #3C0499 0%, #A814E9 72.98%);
position: relative;
}
.wrapper .one li:first-child:before {
content: "";
width: 60px;
height: 60px;
background: linear-gradient(232.94deg, #F27B0A 38.78%, #FFDC5C 84.8%);
border-radius: 50%;
position: absolute;
top: 0;
left: -60px;
transform: translate(, );
}
.wrapper .one li:nth-child(2) {
background: linear-gradient(270deg, #417EFF 0%, #9CDFFF 100%);
}
.wrapper .one li:last-child {
background: linear-gradient(133.28deg, #B20EC4 26.86%, #D277FF 97.17%);
}
.wrapper .eight {
display: flex;
position: relative;
margin-left: -25px;
}
.wrapper .eight .circle {
display: flex;
flex-direction: column;
}
.wrapper .eight .circle:first-child, .wrapper .eight .circle:last-child {
position: absolute;
}
.wrapper .eight .circle:first-child {
transform: scale(0.6) rotate(-180deg);
top: -35px;
transform-origin: 47.9% 50%;
z-index: 10;
}
.wrapper .eight .circle:last-child {
transform: scale(0.7);
bottom: -28px;
}
.wrapper .eight .circle ul {
display: flex;
}
.wrapper .eight .circle ul li:nth-child(1) {
height: 180px;
width: 90px;
border-radius: 90px 0 0 90px;
background: linear-gradient(271.31deg, #FF880B 4.79%, #FFEC66 97.81%);
}
.wrapper .eight .circle ul li {
display: flex;
flex-direction: column;
}
.wrapper .eight .circle ul li span {
width: 90px;
height: 90px;
}
.wrapper .eight .circle ul li span:nth-child(1) {
background: #fff;
border-radius: 0 90px 0 0;
}
.wrapper .eight .circle ul li span:last-child {
background: linear-gradient(223.99deg, #7E1EF9 5.01%, #84058F 68.36%);
border-radius: 0 0 90px 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="two">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="zero">
<li></li>
<li><span></span><span></span></li>
</ul>
<ul class="two">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="two">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>HAPPY NEW YEAR</p>
</div>
</body>
</html>