Ёлочная игрушка CSS

Красивую вращающуюся ёлочную игрушку нашла на codepen.io. Игрушку можно использовать для украшения сайтов и блогов. К сожалению, своих праздничных бесплатных скриптов, гаджетов или шаблонов Блоггер не имеет, поэтому каждый владелец сайта выкручивается как может. 

В предыдущей статье я предлагала вашему вниманию живую картинку спящего Санта Клауса. Но его можно было установить только в сообщении или на страницах блога. Сегодняшняя новогодняя ёлочная игрушка более мобильна. Она хорошо встаёт в боковую панель или в любом другом месте, например, в подвале сайта, как гаджет и так же её можно установить в статье или на страницах Блоггера.

Выглядит игрушка так:

Шарик вращается, точнее вращаются верхние лепестки у шара, но создаётся иллюзия, что вращается именно игрушка. 

Посмотреть вживую на игрушку или поменять в ней что-то удобно в визуальном редакторе.

Код игрушки

<div style="text-align: center;"><span style="font-size: x-large;"><span style="color: #2b00fe;"><b><i>С Новым годом и Рождеством!</i></b></span></span> <div aria-label="Ornament" class="ornament"> <div class="ornament__hoop"></div> <div class="ornament__cap"> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> <div class="ornament__cap-petal-shadow"></div> </div> <div class="ornament__mouth"></div> <div class="ornament__bulb"></div> <style> .ornament { margin-left: auto; margin-right: auto; width: 6em } :root { --bg: #c30031; --fg: #002b66; --animDur: 4s; font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } .ornament, .ornament__bulb { width: 6.75em; } .ornament { position: relative; height: 8.5em; } .ornament, .ornament div { transform-style: preserve-3d; } .ornament div { position: absolute; } .ornament__hoop, .ornament__bulb { border-radius: 50%; } .ornament__hoop { animation: hoopRotate var(--animDur) linear infinite; box-shadow: 0 0 0.05em 0.05em #fffa inset, 0 0 0 0.1em #848484 inset; top: 0; left: 50%; transform: translateX(-50%); width: 1em; height: 1em; } .ornament__cap, .ornament__cap-petal, .ornament__cap-petal-shadow { height: 0.9em; } .ornament__cap, .ornament__mouth { top: 0.8em; left: 2.5em; width: 1.75em; } .ornament__cap { animation: petalsRotate var(--animDur) linear infinite; } .ornament__cap-petal, .ornament__cap-petal-shadow { --clipPath: polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); clip-path: var(--clipPath); -webkit-clip-path: var(--clipPath); left: 50%; width: 0.7em; transform-origin: 50% 0; } .ornament__cap-petal { animation: petalGlare var(--animDur) linear infinite; background-color: #ae8a71; background-image: linear-gradient(30deg,#d3c0b2 24%,#d3c0b200 25%), linear-gradient(-30deg,#d3c0b2 24%,#d3c0b200 25%), radial-gradient(0.1em 0.1em at 0.2em 0.2em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.5em 0.2em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.2em 0.4em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.5em 0.4em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.2em 0.6em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.5em 0.6em,#d3c0b2 49%,#d3c0b200 50%), radial-gradient(0.1em 0.1em at 0.2em 0.25em,#0003 49%,#0000 50%), radial-gradient(0.1em 0.1em at 0.5em 0.25em,#0003 49%,#0000 50%), radial-gradient(0.1em 0.1em at 0.2em 0.45em,#0003 49%,#0000 50%), radial-gradient(0.1em 0.1em at 0.5em 0.45em,#0003 49%,#0000 50%), radial-gradient(0.1em 0.1em at 0.2em 0.65em,#0003 49%,#0000 50%), radial-gradient(0.1em 0.1em at 0.5em 0.65em,#0003 49%,#0000 50%); box-shadow: 0.1em 0 0 #d3c0b2 inset, -0.1em 0 0 #d3c0b2 inset; transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(even) { animation-delay: calc(var(--animDur) / -8); background-color: #d3c0b2; } .ornament__cap-petal:nth-child(2) { transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(3) { transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(4) { transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(5) { transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(6) { transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(7) { transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal:nth-child(8) { transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) rotateX(8deg); } .ornament__cap-petal-shadow { background-color: #0007; transform: translateX(-50%) rotateY(0deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(10) { transform: translateX(-50%) rotateY(45deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(11) { transform: translateX(-50%) rotateY(90deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(12) { transform: translateX(-50%) rotateY(135deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(13) { transform: translateX(-50%) rotateY(180deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(14) { transform: translateX(-50%) rotateY(225deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:nth-child(15) { transform: translateX(-50%) rotateY(270deg) translateZ(0.875em) translateY(0.05em); } .ornament__cap-petal-shadow:last-child { transform: translateX(-50%) rotateY(315deg) translateZ(0.875em) translateY(0.05em); } .ornament__mouth, .ornament__bulb { background-color: var(--fg); } .ornament__mouth { box-shadow: 0 0.2em 0 #d3c0b2 inset, 0.2em 0 0.2em #000a inset, -0.4em 0 0.2em #000a inset, 0 -0.1em 0.1em var(--fg) inset, -0.9em 0 0.2em #000a inset, 0 0.1em 0.1em #0007; height: 1.1em; will-change: transform; } .ornament__bulb { background-image: radial-gradient(100% 100% at 30% 30%,#fff7,#fff0 50%), radial-gradient(25% 60% at 95% 40%,#fff3 5%,#fff0 50%), radial-gradient(100% 100% at 90% 90%,#0004,#0000 50%), linear-gradient(90deg,#0000,#0005); box-shadow: 0.4em 0.4em 0.5em #0007 inset, 0 0 0.5em #0007 inset; top: 1.75em; left: 0; height: 6.75em; transform: translateZ(-1px); } { :root { --bg: #002b66; --fg: #c30031; } } /* Animations */ @keyframes hoopRotate { from, 50%, to { box-shadow: 0 0 0.05em 0.05em #fffa inset, 0 0 0 0.1em #848484 inset; width: 1em; } 25%, 75% { box-shadow: 0 0 0.05em 0.05em #fffa inset, 0 0 0 0.1em #fffa inset; width: 0.1em; } } @keyframes petalGlare { from, 25%, 50%, 75%, to { background-color: #ae8a71; } 12.5%, 37.5%, 62.5%, 87.5% { background-color: #d3c0b2; } } @keyframes petalsRotate { from { transform: rotateY(0); } to { transform: rotateY(1turn); } }</style> </div></div>

Изменить в коде можно текст и его цвет, а так же цвета игрушки.

Текст — выделила красным

Цвет текста — выделила в коде зелёным

Так как цвет игрушки градиентный, то и менять желательно на подобный. В любом генераторе градиента (например: https://cssgradient.io/) создайте нужные оттенки и замените. Выделила в коде участок синим цветом.

Тень игрушки в коде отметила оранжевым, менять можно на шестизначные коды, вот такого вида: #0000FF;

Верхний столбик у игрушки в коде выделила фиолетовым. Менять нужно 2 цвета.

Поменяв цвета, можно сделать более яркие игрушки. У меня получились такие: