Вращающиеся кольца из текста

Пример:

HTML:

<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>

</div>

</div>

CSS:

.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: #337AB7;
}
.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%, #BFE2FF 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);
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

.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: #337AB7;

}

.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%, #BFE2FF 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);

}

Если использовать библиотеку jQuery и небольшой код для нее, то можно значительно упросить HTML и CSS.

<div class="preloader">
	<div class="preloader-ring">Вращающиеся</div>	
	<div class="preloader-ring">Кольца из текста</div>
</div>

<div class="preloader-ring">Вращающиеся</div>

<div class="preloader-ring">Кольца из текста</div>

</div>

.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: #337AB7;
}
.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%, #BFE2FF 50% 55%, transparent 55%);
	content: "";
}
@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);
	}
}

.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: #337AB7;

}

.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%, #BFE2FF 50% 55%, transparent 55%);

content: "";

}

@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);

}

$( ".preloader-ring" ).each(function() {
	let text = $(this).text(),
	textArr = text.split(''),
	a = 0;
	$(this).html('');
	for (let i = 0; i <= 30; i++) {
		if (!textArr[i] || textArr[i] == " ") {
			textArr[i] = "";
		}
		$(this).append('<div class="preloader-sector" style="transform: rotateY(' +a+ 'deg) translateZ(160px)">'+textArr[i]+'</div>');
		a = a+12;
	}
});

$( ".preloader-ring" ).each(function() {

let text = $(this).text(),

textArr = text.split(''),

a = 0;

$(this).html('');

for (let i = 0; i <= 30; i++) {

if (!textArr[i] || textArr[i] == " ") {

textArr[i] = "";

}

$(this).append('<div class="preloader-sector" style="transform: rotateY(' +a+ 'deg) translateZ(160px)">'+textArr[i]+'</div>');

a = a+12;

}

});

За основу взято решение, найденное на codepen.io у пользователя Jon Kantner

Пример:

HTML:

CSS:

Смотрите также:

Имитация набора текста с переливающимся эффектом

Замена текста перемешиванием на JS

Смежные кнопки на CSS

Добавить комментарий: