Форум

dima85 · #1 (**permalink**) 02.03.2017, 15:47

Этот вариант вставляет картинку в центр страницы

<body>
  <div class="container">
   <div class="row" id="content">
***
  </div>
  </div>
 </body>

.container {
    background-image: url('smiley.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

Вместо этой картинки я хочу вставить на основе css3 движущийся элемент, вот такой:

#loading {
 border:15px solid #fff;
 border-top:15px solid #FF6600;
 border-radius:50%;
 width:50px;
 height:50px;
 animation:spin 1s linear infinite;
 display:block;
 margin:0 auto;
 left:49%;
 position:absolute;
 top:50%;
}
@keyframes spin {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
}

Для этого в html мне нужно добавить новый div, вот так:

<body>
  <div class="container"><div id="loading"></div>
   <div class="row" id="content">
***
  </div>
  </div>
 </body>

Вопрос, можно ли как-то вставить этот новый движущийся css элемент без добавления тега <div id="loading"></div>. То есть как в первом варианте прямо в container? Если я в css заменяю #loading на .container в css у меня весь контент крутится.

laimas · #2 (**permalink**) 02.03.2017, 18:08

Сообщение от dima85

Если я в css заменяю #loading на .container в css у меня весь контент крутится.

Не вздумайте да тега BODY добраться, укажите его, будет крутиться монитор.

Ну все правильно - анимарованный стиль применяется к тому элементу, который указа в селекторе. Если хотите крутить элемент внутри .container, то каким образом вы его будете крутить если его не вставить в этот контейнер? Он что у вас есть просит или места занимает слишком? )

dima85 · #3 (**permalink**) 02.03.2017, 18:13

Я не против, можно и div добавить. Просто может есть какие-то лучше решение. Допустим как я предложил в первом варианте, там не требуется добавлять div

destus · #4 (**permalink**) 02.03.2017, 18:40

dima85,
может тебе нужны псевдоэлементы? (:after, :before)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	
	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}
	
	.container {
		height: 100px;
                position: relative;
	}	
	
	.container:after {
		content: '';
		 border:15px solid #fff;
		 border-top:15px solid #FF6600;
		 border-radius:50%;
		 width:50px;
		 height:50px;
		 animation:spin 1s linear infinite;
		 display:block;
		 margin:0 auto;
		 left:49%;
		 position:absolute;
		 top:50%;
	}
	@keyframes spin {
	 0% { transform:rotate(0deg); }
	 100% { transform:rotate(360deg); }
	}		
    </style>
</head>
<body>
  <div class="container">
   <div class="row" id="content">
***
  </div>
  </div>
 </body>
</html>

laimas · #5 (**permalink**) 03.03.2017, 05:32

Сообщение от dima85

Просто может есть какие-то лучше решение.

Ну лучше, не лучше сказать трудно, но как показали через псевдоэлементы, только в вашем случае нужно не container его определять, а через второе имя класса, которое добавлять/удалять у container. Ну или содержимое должно перекрывать этот псевдоэлемент и он не мешал на протяжении всей работы слайдера.

Форум

Справочник

Discord чат

Курсы javascript