Когда человек действительно хочет чего-то, вся Вселенная вступает в сговор, чтобы помочь этому человеку осуществить свою мечту.
21-ноября-2023, 19:00 2 0
Тут на днях немного задумался, а ведь до Нового года осталось около 40 дней. Кстати я на под-домене запустил счётчик отсчёта времени до Нового года. Ну и в преддверии конечно же буду публиковать новогодние украшения для сайта. И первое украшение это Новогодняя елка с гирляндами для сайта. Выполнена ёлочка на CSS И HTML. Из анимации мерцающая гирлянда. Размер елки задается шириной SVG элемента в классе #tree
HTML
<svg id="tree" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="-1694.2 483.2 199.3 285.2" xml:space="preserve">
<g id="tree">
<rect x="-1605.6" y="697.1" class="st0" width="21.7" height="71.3"/>
<polygon class="st1" points="-1656.1 616.8 -1634.8 612 -1670.6 676.1 -1648.5 671.1 -1694.2 753 -1595 730.5 -1595 507.4 "/>
<polygon class="st2" points="-1494.9 753 -1540.6 671.1 -1518.5 676.1 -1554.4 612 -1533.1 616.8 -1594.7 506.8 -1595 507.4 -1595 730.5 -1594.7 730.4 "/>
</g>
<g id="lights">
<g id="blue-lt">
<circle class="blue-lt g1" cx="-1575" cy="706.1" r="9"/>
<circle class="blue-lt g2" cx="-1621.3" cy="641" r="7"/>
<circle class="blue-lt g3" cx="-1665.5" cy="732.8" r="7"/>
<circle class="blue-lt g1" cx="-1600.3" cy="668.5" r="7"/>
</g>
<g id="blue-dk">
<circle class="blue-dk g3" cx="-1578.3" cy="570.8" r="7"/>
<circle class="blue-dk g1" cx="-1538" cy="718.6" r="7"/>
<circle class="blue-dk g2" cx="-1594.8" cy="610.3" r="7"/>
</g>
<g id="red-md">
<circle class="red-md g1" cx="-1635.6" cy="681.7" r="9"/>
<circle class="red-md g1" cx="-1570.3" cy="634" r="9"/>
<circle class="red-md g2" cx="-1607.3" cy="711.6" r="7"/>
</g>
<g id="gold-lt">
<circle class="gold-lt g1" cx="-1612.3" cy="585.8" r="9"/>
<circle class="gold-lt g2" cx="-1631.6" cy="705.6" r="7"/>
</g>
<g id="gold-dk">
<circle class="gold-dk g2" cx="-1572.3" cy="604.7" r="7"/>
<circle class="gold-dk g3" cx="-1561.3" cy="681.7" r="7"/>
</g>
</g>
<polygon class="st3" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/>
<polygon class="st4" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/>
</svg>
CSS
#tree {
width: 220px;
display: block;
margin: 0 auto;
}
.st0 {
fill:#332C28;
}
.st1 {
fill:#0f690f;
}
.st2 {
fill:#388f38;
}
.st3 {
fill:#a60505;
}
.st4 {
fill:#d90000;
}
.red-md {
fill: #aa1231;
animation: 0.6s red-flash ease-in-out infinite;
}
@keyframes red-flash {
40% {
fill: #ea385c;
}
80% {
fill: #aa1231;
}
}
.gold-lt {
fill: #c1881c;
animation: 0.6s gold-lt-flash ease-in-out infinite;
}
@keyframes gold-lt-flash {
40% {
fill: #e7b75c;
}
80% {
fill: #c1881c;
}
}
.blue-lt {
fill: #1f3e64;
animation: 0.6s blue-lt-flash ease-in-out infinite;
}
@keyframes blue-lt-flash {
40% {
fill: #386fb1;
}
80% {
fill: #1f3e64;
}
}
.blue-dk {
fill: #0f1f2f;
animation: 0.6s blue-dk-flash ease-in-out infinite;
}
@keyframes blue-dk-flash {
40% {
fill: #28527c;
}
80% {
fill: #0f1f2f;
}
}
.gold-dk {
fill: #69512a;
animation: 0.6s gold-dk-flash ease-in-out infinite;
}
@keyframes gold-dk-flash {
40% {
fill: #b28947;
}
80% {
fill: #69512a;
}
}
.g1 {
animation-delay: 0s;
}
.g2 {
animation-delay: 0.4s;
}
.g3 {
animation-delay: 0.8s;
}
С наступающими Новогодними праздниками!!!