Ёлки для сайта на Новый год
Немного истории. Традиция украшения ёлки на Новый год появилась в России в XIX веке благодаря Петру Великому, который был большим поклонником всего европейского. Он повелел отмечать Новый год с елью как символом обновления и возрождения.
До этого на Руси новогодние празднования приходились на другой день - 1 сентября, когда отмечали наступление Нового года. Вместо ёлки использовали другие деревья или ветки, которые украшали свечами, плодами и сладостями. В этот день проводили ярмарки и гуляния.
Ёлка №1
Ёлку нашла здесь. Звёздочка и гирлянда на ёлке мигает разноцветными огоньками. В коде можно поменять цвета, сделать это легко, так как каждая деталь ёлки в коде прописана. Код на CSS. Работоспособность ёлочки проверяем в визуальном редакторе.
Код:
<div class="container">
<div class="tree">
<div class="ornament or1">
<div class="shine"></div>
</div>
<div class="ornament or2">
<div class="shine"></div>
</div>
<div class="ornament or3">
<div class="shine"></div>
</div>
<div class="ornament or4">
<div class="shine"></div>
</div>
<div class="ornament or5">
<div class="shine">
</div>
</div>
<div class="ornament or6">
<div class="shine"></div>
</div>
<div class="ornament or7">
<div class="shine"></div>
</div>
<div class="ornament or8">
<div class="shine"></div>
</div>
<div class="ornament or9">
<div class="shine"></div>
</div>
<div class="ornament or10">
<div class="shine"></div>
</div>
<div class="ornament or11">
<div class="shine"></div>
</div>
<div class="ornament or12">
<div class="shine"></div>
</div>
<div class="ornament or13">
</div>
</div>
<div class="star-light"></div>
<div class="star"></div>
<div class="star-highlight"></div>
<div class="trunk"></div>
<div class="floor"></div>
</div>
<style>
.container {
position: relative;
/* background: #1c1c1c; */
width: 460px;
height: 460px;
margin: auto;
/* border: 1px solid; */
/* border-radius: 100px; */
margin-top: 15vh;
}
.tree {
position: absolute;
background: #2e7055;
width: 60%;
height: 70%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
bottom: 13%;
left: 20.5%;
z-index: 2;
}
.floor {
position: absolute;
width: 35%;
height: 15%;
border-radius: 50%;
background: #69122a;
bottom: -8%;
left: 32%;
}
.star {
position: absolute;
width: 20%;
height: 20%;
background: #ffdc5e;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
left: 40.5%;
top: 5%;
z-index: 3;
}
.star-highlight {
position: absolute;
width: 20%;
height: 20%;
background: #ffedad;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%);
left: 40.5%;
top: 5%;
z-index: 3;
}
.star-light {
position: absolute;
width: 20%;
height: 20%;
background: #ffefb5;
filter: opacity(.7);
border-radius: 50%;
left: 40.5%;
top: 5%;
z-index: 2;
animation: star 3s ease-in-out infinite;
}
.trunk {
position: absolute;
height: 15%;
width: 10%;
background: #2e2713;
bottom: 0;
left: 45%;
z-index:1;
}
.ornament {
position: absolute;
border-radius: 50%;
width: 4%;
height: 7%;
z-index: 4;
background: yellow;
animation: lights 1.6s ease-in-out infinite;
}
.or1 {
top: 18%;
left: 42%;
animation-delay: .5s;
}
.or2 {
top: 28%;
left: 59%;
animation-delay: .5s;
}
.or3 {
top: 35%;
left: 36%;
animation-delay: .6s;
}
.or4 {
top: 45%;
left: 53%;
animation-delay: .6s;
}
.or5 {
top: 55%;
left: 73%;
animation-delay: .6s;
}
.or6 {
top: 52%;
left: 25%;
animation-delay: .7s;
}
.or7 {
top: 63%;
left: 44%;
animation-delay: .7s;
}
.or8 {
top: 73%;
left: 66%;
animation-delay: .7s;
}
.or9 {
top: 84%;
left: 87%;
animation-delay: .7s;
}
.or10 {
top: 70%;
left: 16%;
animation-delay: .8s;
}
.or11 {
top: 80%;
left: 35%;
animation-delay: .8s;
}
.or12 {
top: 92%;
left: 55%;
animation-delay: .8s;
}
.or13 {
top: 90%;
left: 6%;
animation-delay: .9s;
}
/* .shine {
position: absolute;
width: 60%;
height: 60%;
background: white;
border-radius: 50%;
filter: opacity(48%);
top: 6%;
right: 10%;
} */
@keyframes lights {
100% {
background: #ffe97d;
}
75% {
background: #ff386d;
}
50% {
background: #6b8bff;
}
25 {
background: #62e391;
}
0% {
background: #ffe97d;
}
}
@keyframes star {
100% {
transform: scale(.5);
}
50% {
transform: scale(1.1);
}
0% {
transform: scale(.5);
}
}
</style>
Ёлка №2
Ёлочка простая, сделана на CSS, но выглядит необычно. Нашла её на сайте codepen.io
Код:
<div class="box">
<div class="part-1">
<div class="line-5"></div>
</div>
<div class="part-2">
<div class="line-1"></div>
</div>
<div class="part-3">
<div class="line-3"></div>
</div>
<div class="part-4">
<div class="line-2"></div>
</div>
<div class="part-5">
<div class="line-3"></div>
</div>
<div class="part-6">
<div class="line-1"></div>
</div>
<div class="part-7">
<div class="line-5"></div>
</div>
<div class="part-8">
<div class="line-1"></div>
</div>
<div class="part-9">
<div class="line-3"></div>
</div>
<div class="part-10">
<div class="line-2"></div>
</div>
<div class="part-11">
<div class="line-3"></div>
</div>
<div class="part-12">
<div class="line-1"></div>
</div>
<div class="part-13">
<div class="line-5"></div>
</div>
<div class="part-14">
<div class="line-1"></div>
</div>
<div class="part-15">
<div class="line-3"></div>
</div>
<div class="part-16">
<div class="line-2"></div>
</div>
<div class="part-17">
<div class="line-3"></div>
</div>
<div class="part-18">
<div class="line-1"></div>
</div>
<div class="part-19">
</div>
</div>
<style>
.box {
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
overflow: hidden;
}
.part-1 {
position: absolute;
width: 40%;
height: 5%;
left: 30%;
bottom: 5%;
background: #0c2600;
border-radius: 20px;
z-index: 1;
}
.line-5 {
position: absolute;
width: 90%;
height: 5%;
left: 5%;
top: 20%;
background: none;
border-bottom: 10px dotted #c42bf3;
animation: 7s changeMe2 infinite;
z-index: 1;
}
.part-2 {
position: absolute;
width: 38%;
height: 5%;
left: 31%;
bottom: 10%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.line-1 {
position: absolute;
width: 90%;
height: 5%;
left: 5%;
top: 20%;
background: none;
border-bottom: 10px dotted #ffa3c4;
z-index: 1;
}
.part-3 {
position: absolute;
width: 36%;
height: 5%;
left: 32%;
bottom: 15%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.line-3 {
position: absolute;
width: 90%;
height: 5%;
left: 5%;
top: 20%;
background: none;
border-bottom: 10px dotted #ffe407;
animation: changeMe3 5s infinite;
z-index: 1;
}
.part-4 {
position: absolute;
width: 34%;
height: 5%;
left: 33%;
bottom: 20%;
background: #184b00;
border-radius: 20px;
z-index: 1;
}
.line-2 {
position: absolute;
width: 90%;
height: 5%;
left: 5%;
top: 20%;
background: none;
border-bottom: 10px dotted #ff8529;
animation: 10s changeMe infinite;
z-index: 1;
}
.part-5 {
position: absolute;
width: 32%;
height: 5%;
left: 34%;
bottom: 25%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.part-6 {
position: absolute;
width: 30%;
height: 5%;
left: 35%;
bottom: 30%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.part-7 {
position: absolute;
width: 28%;
height: 5%;
left: 36%;
bottom: 35%;
background: #0c2600;
border-radius: 20px;
z-index: 1;
}
.part-8 {
position: absolute;
width: 26%;
height: 5%;
left: 37%;
bottom: 40%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.part-9 {
position: absolute;
width: 24%;
height: 5%;
left: 38%;
bottom: 45%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.part-10 {
position: absolute;
width: 22%;
height: 5%;
left: 39%;
bottom: 50%;
background: #184b00;
border-radius: 20px;
z-index: 1;
}
.part-11 {
position: absolute;
width: 20%;
height: 5%;
left: 40%;
bottom: 55%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.part-12 {
position: absolute;
width: 18%;
height: 5%;
left: 41%;
bottom: 60%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.part-13 {
position: absolute;
width: 16%;
height: 5%;
left: 42%;
bottom: 65%;
background: #0c2600;
border-radius: 20px;
z-index: 1;
}
.part-14 {
position: absolute;
width: 14%;
height: 5%;
left: 43%;
bottom: 70%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.part-15 {
position: absolute;
width: 12%;
height: 5%;
left: 44%;
bottom: 75%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.part-16 {
position: absolute;
width: 10%;
height: 5%;
left: 45%;
bottom: 80%;
background: #184b00;
border-radius: 20px;
z-index: 1;
}
.part-17 {
position: absolute;
width: 8%;
height: 5%;
left: 46%;
bottom: 85%;
background: #143f00;
border-radius: 20px;
z-index: 1;
}
.part-18 {
position: absolute;
width: 6%;
height: 5%;
left: 47%;
bottom: 90%;
background: #103200;
border-radius: 20px;
z-index: 1;
}
.part-19 {
position: absolute;
width: 4%;
height: 5%;
left: 48%;
bottom: 95%;
background: #0c2600;
border-radius: 20px;
z-index: 1;
}
@keyframes changeMe {
0%,
100% {
border-bottom: 10px dotted #ff8529;
}
25%,
75% {
border-bottom: 10px dotted #ff9b4f;
}
50% {
border-bottom: 10px dotted #ffb176;
}
}
@keyframes changeMe2 {
0%,
100% {
border-bottom: 10px dotted #c42bf3;
}
25%,
75% {
border-bottom: 10px dotted #b026da;
}
50% {
border-bottom: 10px dotted #9c22c2;
}
}
@keyframes changeMe3 {
0%,
100% {
border-bottom: 10px dotted #ffe407;
}
25%,
75% {
border-bottom: 10px dotted #ffec51;
}
50% {
border-bottom: 10px dotted #fff6b4;
}
}
</style>
В коде можно поменять цвет огоньков.
Комментарии со спамом удаляются.