7

допустим есть div который при помощи анимации CSS "крутится" без остановки. Внутри него есть div с текстом который так же крутится. Возможно ли сделать так чтобы дочерний div "стоял" на месте и был исключен из анимации при помощи CSS?

2 ответа 2

10

Вариант с использованием псевдоэлемента

Пример

*{
	box-sizing: border-box;
}

.circle{
	width: 100px;
	height: 100px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;	
	position: relative;	
}
.circle:before{
	content: '';
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #ccc;
	border-right-color: #f00;
	border-radius: 50%;
	animation: rotate 1s linear infinite;
}
@keyframes rotate{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
<div class="circle">
	<div class="circle__text">
		Text
	</div>
</div>

6

Можно задать дочернему элементу аналогичное кручение в обратную сторону - тогда будет казаться, что он стоит на месте:

div {
  width: 100px;
  height: 70px;
  border: 1px solid black;
  padding: 30px;
  margin: 50px;
  text-align: center;
  animation: rotatediv 5s linear infinite;
}

p {
  animation: rotatep 5s linear infinite;
}

@keyframes rotatediv {
  from { transform: rotate(0deg);}
  to { transform: rotate(360deg); }
}

@keyframes rotatep {
  from { transform: rotate(0deg);}
  to { transform: rotate(-360deg); }
}
<div>
<p>
текст внутри дива
</p>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.