Точную дату появления традиции украшать ёлку на Новый год в России назвать сложно, так как она менялась на протяжении истории. Однако известно, что в допетровской Руси ёлки не украшали, так как этот обычай пришёл к нам из Европы благодаря Петру I. Он ввёл традицию празднования Нового года и повелел ставить на праздник ёлку.
Сегодня предлагаю посмотреть несколько ёлочек, которые можно установить на сайт перед Новым годом или Рождеством.
Елка 1
У ёлочки мигает свет от звезды. Выглядит ёлка так:
<div class="container">
<div class="tree">
<div class="tree-triangle1"></div>
<div class="tree-triangle2"></div>
<div class="tree-triangle3"></div>
<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="trunk"></div>
<div class="star-light"></div>
<div class="star"></div>
<div class="star-highlight"></div>
</div>
</div>
<style>
.container {
position: relative;
width: 380px;
height: 380px;
margin: auto;
margin-top: 20vh;
background: #0b1a5e;
border-radius: 120px;
z-index: -2;
}
.tree {
position: absolute;
width: 100%;
height: 100%;
left: 13%;
top: 5%;
}
.tree-triangle3 {
position: absolute;
width: 66%;
height: 36%;
bottom: 20%;
left: 3.5%;
background: #034f33;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.tree-triangle2 {
position: absolute;
width: 53%;
height: 33%;
bottom: 35%;
left: 10%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: #046944;
z-index: 2;
}
.tree-triangle1 {
position: absolute;
width: 42%;
height: 25%;
bottom: 50%;
left: 15.5%;
background: #038052;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
z-index: 3;
}
.trunk {
position: absolute;
width: 10%;
height: 16%;
background: #66503e;
z-index: -1;
bottom: 5%;
left: 32%;
}
.ornament {
position: absolute;
width: 10%;
height: 10%;
border-radius: 50%;
box-shadow: 0 0 3px #033b26;
/* background: #eb5252; */
z-index: 4;
}
.shine {
position: absolute;
width: 55%;
height: 55%;
top: 10%;
right: 11%;
border-radius: 50%;
background: white;
filter: opacity(60%);
}
.or1 {
left: 28%;
top: 34%;
background: #0742d9;
}
.or2 {
left: 40%;
top: 45%;
background: #c91212;
}
.or3 {
left: 20%;
top: 49%;
background: #dbb700;
}
.or4 {
left: 34%;
top: 62%;
background: #0742d9;
}
.or5 {
left: 50%;
top: 69%;
background: #dbb700;
}
.or6 {
left: 15%;
top: 68%;
background: #c91212;
}
.star {
position: absolute;
width: 20%;
height: 20%;
background: #ffe380;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
left: 26.5%;
top: 11%;
z-index: 4;
}
.star-highlight {
position: absolute;
width: 20%;
height: 20%;
background: #fff1bf;
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
50% 70%,
50% 60%,
50% 46%,
50% 36%
);
left: 26.5%;
top: 11%;
z-index: 4;
}
.star-light {
position: absolute;
width: 20%;
height: 20%;
background: #fff1bf;
filter: opacity(0.7);
border-radius: 50%;
left: 26.5%;
top: 11%;
z-index: 3;
animation: star 3s ease-in-out infinite;
}
@keyframes star {
100% {
transform: scale(0.5);
}
50% {
transform: scale(1.1);
}
0% {
transform: scale(0.5);
}
}
</style>
В коде можно поменять цвета оформления:Фон - выделила в коде красным
Цвета треугольников ёлки 3 шт. - выделила зелёным
Цвета ёлочных игрушек (6 шт.) - выделила в коде оранжевым цветом
Цвет звезды (2 шт.) - салатовым
Цвет сияния звезды - синим цветом
Ёлка 2
У этой ёлочки мигает не только звезда, но и игрушки.
<div class="container">
<div class="tree">
</div>
<div class="ornament large orange or1">
<div class="shine"></div>
</div>
<div class="ornament medium blue or2">
<div class="shine"></div>
</div>
<div class="ornament small green or3">
<div class="shine"></div>
</div>
<div class="ornament small pink or4">
<div class="shine"></div>
</div>
<div class="ornament large purple or5">
<div class="shine">
</div>
</div>
<div class="ornament medium purple or6">
<div class="shine"></div>
</div>
<div class="ornament medium blue or7">
<div class="shine"></div>
</div>
<div class="ornament large pink or8">
<div class="shine"></div>
</div>
<div class="ornament medium orange or9">
<div class="shine"></div>
</div>
<div class="ornament medium green or10">
<div class="shine"></div>
</div>
<div class="ornament large pink or11">
<div class="shine"></div>
</div>
<div class="ornament blue large or12">
<div class="shine"></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: 65%;
height: 70%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
bottom: 13%;
left: 18%;
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%;
z-index: 3;
}
.large {
height: 10%;
width: 10%;
animation: lights 1.5s linear infinite;
}
.medium {
height: 7%;
width: 7%;
animation: lights 1.4s linear infinite;
}
.small {
width: 5%;
height: 5%;
animation: lights 1.2s linear infinite;
}
.orange {
background: #FDC590;
}
.pink {
background: #f799d2;
}
.green {
background: #9af5c6;
}
.blue {
background: #7dd4ff;
}
.purple {
background: #afa6ff;
}
.or1 {
left: 33%;
top: 42%;
}
.or2 {
top: 26%;
left: 52%;
}
.or3 {
top: 38%;
left: 48%;
}
.or4 {
top: 29%;
left: 41.5%;
}
.or5 {
top: 59%;
left: 35%;
}
.or6 {
top: 41%;
left: 59%;
}
.or7 {
top: 51%;
right: 42%;
}
.or8 {
top: 55%;
right: 26%;
}
.or9 {
top: 67%;
left: 55%;
}
.or10 {
top: 75%;
left: 42%;
}
.or11 {
top: 70%;
left: 21%;
}
.or12 {
top: 73%;
right: 22.5%;
}
.shine {
position: absolute;
width: 60%;
height: 60%;
background: white;
border-radius: 50%;
filter: opacity(48%);
top: 6%;
right: 10%;
}
@keyframes lights {
100% {
filter: brightness(.7);
}
50% {
filter: brightness(1.2);
}
0% {
filter: brightness(.7);
}
}
@keyframes star {
100% {
transform: scale(.5);
}
50% {
transform: scale(1.1);
}
0% {
transform: scale(.5);
}
}
</style>
По аналогии можно менять цвета оформления и этой ёлки, как и в предыдущем коде. Все названия частей ёлки имеют свой цвет, их и нужно менять.
Комментарии со спамом удаляются.