Текстовые вращающие кольца на Блоггер
Сегодня в статье новое украшение для сайта — вращающиеся текстовые кольца. Выглядят они так:
Подсмотрела оформление на сайте https://atuin.ru.
Проверить работоспособность кода или сделать в нём изменения можно в визуальном редакторе.
Использовать украшение можно для объявлений, какой-либо рекламы и т. д.
Код
<div class="preloader">
<div class="preloader-ring">
<div class="preloader-sector">П</div>
<div class="preloader-sector">р</div>
<div class="preloader-sector">и</div>
<div class="preloader-sector">м</div>
<div class="preloader-sector">е</div>
<div class="preloader-sector">р</div>
<div class="preloader-sector">н</div>
<div class="preloader-sector">ы</div>
<div class="preloader-sector">й</div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
</div>
<div class="preloader-ring">
<div class="preloader-sector">т</div>
<div class="preloader-sector">е</div>
<div class="preloader-sector">к</div>
<div class="preloader-sector">с</div>
<div class="preloader-sector">т</div>
<div class="preloader-sector"></div>
<div class="preloader-sector">н</div>
<div class="preloader-sector">а</div>
<div class="preloader-sector"></div>
<div class="preloader-sector">к</div>
<div class="preloader-sector">о</div>
<div class="preloader-sector">л</div>
<div class="preloader-sector">ь</div>
<div class="preloader-sector">ц</div>
<div class="preloader-sector">а</div>
<div class="preloader-sector">х</div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
<div class="preloader-sector"></div>
</div>
</div>
<style>.preloader {
display: flex;
animation: spin-1 8s linear infinite;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
width: 300px;
height: 300px;
color: #4c14c6;
}
.preloader,
.preloader-ring {
transform-style: preserve-3d;
}
.preloader-ring {
animation: spin-2 4s linear infinite;
position: relative;
height: 60px;
width: 20px;
}
.preloader-ring:nth-child(even) {
animation-direction: reverse;
}
.preloader-sector {
font-size: 40px;
line-height: 60px;
font-family: Consolas, Lucida Console, Menlo, Monaco, monospace;
font-weight: 600;
text-align: center;
position: absolute;
top: 0;
left: 0;
text-transform: uppercase;
transform: translateZ(160px);
}
.preloader-sector,
.preloader-sector:empty:before {
display: inline-block;
width: 100%;
height: 100%;
}
.preloader-sector:empty:before {
background: linear-gradient(transparent 50%, #4c14c6 50% 55%, transparent 55%);
content: "";
}
.preloader-sector:nth-child(2) {
transform: rotateY(12deg) translateZ(160px);
}
.preloader-sector:nth-child(3) {
transform: rotateY(24deg) translateZ(160px);
}
.preloader-sector:nth-child(4) {
transform: rotateY(36deg) translateZ(160px);
}
.preloader-sector:nth-child(5) {
transform: rotateY(48deg) translateZ(160px);
}
.preloader-sector:nth-child(6) {
transform: rotateY(60deg) translateZ(160px);
}
.preloader-sector:nth-child(7) {
transform: rotateY(72deg) translateZ(160px);
}
.preloader-sector:nth-child(8) {
transform: rotateY(84deg) translateZ(160px);
}
.preloader-sector:nth-child(9) {
transform: rotateY(96deg) translateZ(160px);
}
.preloader-sector:nth-child(10) {
transform: rotateY(108deg) translateZ(160px);
}
.preloader-sector:nth-child(11) {
transform: rotateY(120deg) translateZ(160px);
}
.preloader-sector:nth-child(12) {
transform: rotateY(132deg) translateZ(160px);
}
.preloader-sector:nth-child(13) {
transform: rotateY(144deg) translateZ(160px);
}
.preloader-sector:nth-child(14) {
transform: rotateY(156deg) translateZ(160px);
}
.preloader-sector:nth-child(15) {
transform: rotateY(168deg) translateZ(160px);
}
.preloader-sector:nth-child(16) {
transform: rotateY(180deg) translateZ(160px);
}
.preloader-sector:nth-child(17) {
transform: rotateY(192deg) translateZ(160px);
}
.preloader-sector:nth-child(18) {
transform: rotateY(204deg) translateZ(160px);
}
.preloader-sector:nth-child(19) {
transform: rotateY(216deg) translateZ(160px);
}
.preloader-sector:nth-child(20) {
transform: rotateY(228deg) translateZ(160px);
}
.preloader-sector:nth-child(21) {
transform: rotateY(240deg) translateZ(160px);
}
.preloader-sector:nth-child(22) {
transform: rotateY(252deg) translateZ(160px);
}
.preloader-sector:nth-child(23) {
transform: rotateY(264deg) translateZ(160px);
}
.preloader-sector:nth-child(24) {
transform: rotateY(276deg) translateZ(160px);
}
.preloader-sector:nth-child(25) {
transform: rotateY(288deg) translateZ(160px);
}
.preloader-sector:nth-child(26) {
transform: rotateY(300deg) translateZ(160px);
}
.preloader-sector:nth-child(27) {
transform: rotateY(312deg) translateZ(160px);
}
.preloader-sector:nth-child(28) {
transform: rotateY(324deg) translateZ(160px);
}
.preloader-sector:nth-child(29) {
transform: rotateY(336deg) translateZ(160px);
}
.preloader-sector:nth-child(30) {
transform: rotateY(348deg) translateZ(160px);
}
@keyframes spin-1 {
from {
transform: rotateY(0) rotateX(30deg);
}
to {
transform: rotateY(1turn) rotateX(30deg);
}
}
@keyframes spin-2 {
from {
transform: rotateY(0);
}
to {
transform: rotateY(1turn);
}
}</style>
Изменить в коде можно: Текст — каждую букву прописываем в новую строку. Выделила в коде красным. Текст можно сделать длиннее, вставляя между знаками >< нужную букву. Либо сделать текст короче, удалив ненужные. Там где букв нет, в кольце будут изображаться чёрточки.
Зелёным выделила цвет букв.
Синим — цвет чёрточек.
Комментарии со спамом удаляются.