Проблема в том, что, не рискуя, мы рискуем в сто раз больше.
7-декабря-2023, 20:48 19 0
Классная анимация к Новому году в виде Снеговика на фоне идущего снега. Можно украсить свой веб-проект. Сниппет Снеговика выполнен на CSS и HTML и не будет нагружать ваш проект. Всех с наступающими праздниками!!!
HTML
<div class="main">
<div class="sun"></div>
<div class="snowman">
<div class="top-hat">
<div class="round-top"></div>
<div class="hat-body-top"></div>
<div class="hat-body-bottom">
<div class="rounded-bottom"></div>
</div>
<div class="brim"></div>
</div>
<div class="snowman-head">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="carrot-nose"></div>
<div class="coal-mouth coal-1"></div>
<div class="coal-mouth coal-2"></div>
<div class="coal-mouth coal-3"></div>
<div class="coal-mouth coal-4"></div>
<div class="coal-mouth coal-5"></div>
</div>
<div class="scarf">
<div class="scarf-top"></div>
<div class="left-side"></div>
<div class="left-shadow"></div>
<div class="left-bottom-shadow"></div>
<div class="left-fringe">
<div class="tassel tassel-1"></div>
<div class="tassel tassel-2"></div>
<div class="tassel tassel-3"></div>
<div class="tassel tassel-4"></div>
<div class="tassel tassel-5"></div>
<div class="tassel tassel-6"></div>
<div class="tassel tassel-7"></div>
<div class="tassel tassel-8"></div>
</div>
<div class="right-side"></div>
<div class="right-shadow"></div>
<div class="right-bottom-shadow"></div>
<div class="right-fringe">
<div class="tassel tassel-1"></div>
<div class="tassel tassel-2"></div>
<div class="tassel tassel-3"></div>
<div class="tassel tassel-4"></div>
<div class="tassel tassel-5"></div>
<div class="tassel tassel-6"></div>
<div class="tassel tassel-7"></div>
</div>
</div>
<div class="snowman-middle">
<div class="coal-button button-1"></div>
<div class="coal-button button-2"></div>
<div class="coal-button button-3"></div>
</div>
<div class="snowman-bottom"></div>
</div>
<div class="branch-arms left-arm">
<div class="arm-base"></div>
<div class="arm-top"></div>
<div class="finger-branch branch-left"></div>
<div class="finger-branch branch-top"></div>
</div>
<div class="branch-arms right-arm">
<div class="arm-base"></div>
<div class="arm-top"></div>
<div class="finger-branch branch-left"></div>
<div class="finger-branch branch-top"></div>
</div>
<div class="snow"></div>
<div class="snowfall"></div>
</div>
CSS
.main {
position: relative;
display: block;
margin: auto;
width: 600px;
height: 750px;
background: radial-gradient(transparent 75%, #05426f 100%),
linear-gradient(
135deg,
#91a5a6,
#8a9b8b,
#8dabab,
#889a80,
#6d969c,
#477e92,
#518998
);
}
.sun {
position: absolute;
height: 14%;
width: 18%;
top: 20%;
right: 15%;
background: radial-gradient(#ecc56b, #e4ddb7);
box-shadow: 0 0 60px 20px #e4ddb7;
border-radius: 50%;
}
.snowman {
position: absolute;
height: 80%;
width: 70%;
top: 15%;
left: 15%;
}
.top-hat {
position: absolute;
height: 30%;
width: 30%;
left: 36%;
}
.round-top {
position: absolute;
width: 60%;
height: 10%;
left: 20%;
top: 5%;
border-radius: 50%;
background: radial-gradient(ellipse at top left, #9b9d8f, #667177, black);
z-index: 10;
}
.hat-body-top {
position: absolute;
height: 38%;
width: 60%;
left: 20%;
top: 10%;
background: linear-gradient(
to right,
#364e4e,
#3a494e,
#32454c,
#59646a,
#7d848a,
#919284,
#6e7d7a
);
border-bottom: 3px solid black;
border-bottom-left-radius: 20%;
border-bottom-right-radius: 20%;
z-index: 9;
}
.hat-body-bottom {
position: absolute;
width: 60%;
height: 33%;
left: 20%;
top: 36%;
background: linear-gradient(
to right,
#630408,
#500106,
#2f0304,
#820f14,
#9e1723,
#af2228,
#992d3a
);
z-index: 8;
}
.rounded-bottom {
position: absolute;
width: 100%;
height: 30%;
top: 90%;
background: linear-gradient(
to right,
#630408,
#500106,
#2f0304,
#820f14,
#9e1723,
#af2228,
#992d3a
);
border-bottom: 3px solid black;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
z-index: 7;
}
.brim {
position: absolute;
width: 110%;
height: 24%;
top: 68%;
left: -5%;
background: radial-gradient(
ellipse at top left,
#6f6e76,
#918593,
#889395,
#6c7981,
#3e5054,
#3f333d,
#707068
);
border-radius: 50%;
z-index: 6;
}
.snowman-head {
position: absolute;
width: 33%;
height: 21%;
left: 34%;
top: 22%;
border-radius: 50%;
border-left: 3px solid #b9b4a5;
border-right: 3px solid #d4d4d4;
background: radial-gradient(
ellipse at top left,
#96afa8,
#7d9798,
#8babba,
#a9b5c3,
#c6c7c9,
#c6c7c9,
#c0cccc
);
z-index: 5;
}
.left-eye {
position: absolute;
top: 38%;
left: 35%;
width: 10%;
height: 13%;
border-radius: 50%;
background: radial-gradient(circle at top left, gray, black);
}
.right-eye {
position: absolute;
top: 37%;
left: 60%;
width: 10%;
height: 13%;
border-radius: 50%;
background: radial-gradient(circle at top left, gray, black);
}
.carrot-nose {
position: absolute;
width: 10%;
height: 45%;
top: 35%;
left: 63%;
border-radius: 50% 50% 50% 50% / 70% 70% 10% 10%;
background: linear-gradient(to right, #eab4a7, #ca7f68, #b94b34);
transform: rotate(76deg);
}
.coal-mouth {
position: absolute;
width: 8%;
height: 10%;
border-radius: 50%;
background: radial-gradient(circle at top left, gray, black);
}
.coal-1 {
top: 79%;
left: 51%;
}
.coal-2 {
top: 78%;
left: 39%;
}
.coal-3 {
top: 71%;
left: 27%;
}
.coal-4 {
top: 78%;
left: 63%;
}
.coal-5 {
top: 71%;
left: 75%;
}
.scarf {
position: absolute;
width: 44%;
height: 38%;
left: 30%;
top: 40%;
z-index: 4;
}
.scarf-top {
position: absolute;
width: 76%;
height: 32%;
left: 11%;
top: -8%;
border-radius: 50%;
background: linear-gradient(#d3d3b5, #c73f44, #8c0d0f);
z-index: 2;
}
.left-side {
position: absolute;
width: 20%;
height: 40%;
top: -21%;
left: 13%;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 180px solid #ab1a27;
border-radius: 5px;
}
.left-shadow {
position: absolute;
width: 11%;
height: 1%;
top: 20%;
left: 26%;
background: transparent;
box-shadow: 0 0 40px 8px;
}
.left-bottom-shadow {
position: absolute;
width: 31%;
height: 0;
top: 96%;
left: 16%;
background: transparent;
box-shadow: 0 0 20px 1px;
}
.left-fringe {
position: absolute;
width: 35%;
height: 15%;
top: 97%;
left: 12%;
}
.right-fringe {
position: absolute;
width: 35%;
height: 15%;
top: 92%;
left: 50%;
}
.tassel {
position: absolute;
width: 25%;
border-radius: 50%;
background: transparent;
border-left: 3px solid #cdcdcf;
}
.tassel-1 {
height: 70%;
}
.tassel-2 {
height: 60%;
left: 13%;
}
.tassel-3 {
height: 70%;
left: 26%;
}
.tassel-4 {
height: 40%;
left: 39%;
}
.tassel-5 {
height: 60%;
left: 52%;
}
.tassel-6 {
height: 70%;
left: 65%;
}
.tassel-7 {
height: 40%;
left: 78%;
}
.tassel-8 {
height: 50%;
left: 91%;
}
.right-side {
position: absolute;
width: 15%;
height: 35%;
top: -21%;
left: 50%;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 180px solid #ab1a27;
border-radius: 5px;
}
.right-shadow {
position: absolute;
width: 7%;
height: 1%;
top: 20%;
left: 62%;
background: transparent;
box-shadow: 0 0 40px 8px;
}
.right-bottom-shadow {
position: absolute;
width: 30%;
height: 0;
top: 92%;
left: 50%;
background: transparent;
box-shadow: 0 0 14px 1px;
}
.snowman-middle {
position: absolute;
width: 41%;
height: 26%;
left: 31%;
top: 42%;
border-radius: 50%;
border-left: 3px solid #b9b4a5;
border-right: 3px solid #d4d4d4;
background: radial-gradient(
ellipse at top left,
#96afa8,
#7d9798,
#8babba,
#a9b5c3,
#c6c7c9,
#c6c7c9,
#c0cccc
);
z-index: 3;
}
.coal-button {
position: absolute;
width: 8%;
height: 11%;
left: 46%;
border-radius: 50%;
background: radial-gradient(circle at top left, gray, black);
}
.button-1 {
top: 38%;
}
.button-2 {
top: 56%;
}
.button-3 {
top: 74%;
}
.snowman-bottom {
position: absolute;
width: 71%;
height: 42%;
left: 16%;
top: 58%;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border-left: 3px solid #b9b4a5;
border-right: 3px solid #d4d4d4;
background: radial-gradient(
ellipse at top left,
#96afa8,
#7d9798,
#8babba,
#a9b5c3,
#c6c7c9,
#c6c7c9,
#c0cccc
);
z-index: 2;
}
.branch-arms {
position: absolute;
top: 27%;
width: 30%;
height: 40%;
z-index: 6;
}
.left-arm {
left: 8%;
}
.right-arm {
left: 65%;
transform: scaleX(-1);
}
.arm-base {
position: absolute;
width: 10%;
height: 30%;
top: 50%;
left: 77%;
border-radius: 50% 50% 50% 50% / 40% 50% 10% 10%;
border-left: 8px solid #6f3316;
transform: rotate(-45deg);
}
.arm-top {
position: absolute;
width: 10%;
height: 20%;
top: 40%;
left: 63%;
border-radius: 50% 50% 50% 50% / 40% 50% 10% 10%;
border-left: 6px solid #6f3316;
transform: rotate(-15deg);
}
.finger-branch {
position: absolute;
width: 10%;
height: 9%;
border-radius: 50% 50% 50% 50% / 40% 0% 10% 100%;
border-left: 4px solid #6f3316;
}
.branch-left {
top: 45%;
left: 56%;
transform: rotate(-50deg);
}
.branch-top {
top: 41%;
left: 59%;
transform: rotate(210deg);
}
.snow {
position: absolute;
width: 100%;
height: 18%;
background: radial-gradient(
ellipse at top,
#cdcdcf,
#a7bac6,
#528b9d,
#3b6c89
);
bottom: 0;
opacity: 0.75;
}
.snowfall {
position: absolute;
height: 100%;
width: 100%;
background: url("https://user-images.githubusercontent.com/7342669/50293046-ab4ed880-0440-11e9-8537-8a0e70729b34.png"),
url("https://user-images.githubusercontent.com/7342669/50293049-ad189c00-0440-11e9-8cae-a57ad65c22ca.png"),
url("https://user-images.githubusercontent.com/7342669/50294834-c58ab580-0444-11e9-84b6-186b19edf94d.png");
animation: letItSnow 20s linear infinite;
z-index: 11;
}
@keyframes letItSnow {
0% {
background-position: 0px 0px;
}
100% {
background-position: 500px 1000px, 400px 400px, 300px;
}
}