<MyRusakov.ru />

Создание нейросетей на Python

Создание нейросетей на Python

Этот курс научит Вас созданию нейросетей на Python. Курс рассчитан на начинающих. Вся информация идёт от простого к сложному очень маленькими шажками. При этом глубокое знание математики не требуется. Поскольку в курсе Вы будете получать эти знания по мере необходимости.

Из курса Вы узнаете всю необходимую теорию и терминологию. Научитесь создавать нейросети самых разных архитектур и обучать их. Также Вы создадите собственный фреймворк. Что очень важно проделать для грамотного использования того же PyTorch. Затем Вы изучите и сам PyTorch.

Помимо уроков к курсу идут упражнения для закрепления материала.

Ещё Вы получите Бонусы, дополняющие основной курс: "Распознавание изображений", "Анализ настроения по тексту отзыва", "Программирование на Python с Нуля до Гуру".

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как сделать прелоадер на чистом CSS3.

Как сделать прелоадер на чистом CSS3.

Всем привет! Сегодня мы рассмотрим, как сделать прелоадер на чистом CSS3.

Раньше, чтобы выполнить такую задачу, нам пришлось бы использовать javascript, однако теперь мы можем делать все на чистом CSS3. И, как это сделать, мы и рассмотрим в этой статье.

Для начала создадим разметку

<div class="pre-loader">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

Как видите, разметка достаточно простая. Все заключено в стилях

Пропишем базовые стили для всех блоков

.pre-loader {
  margin: 200px auto;
  width: 66px;
  height: 50px;
}

.pre-loader > div {
  background-color: #34495e;
  height: 100%;
  width: 10px;
  display: inline-block;
}

Создадим анимацию

@keyframes myMove {
  0% {top: 0px;}
  25% {top: 200px;}
  50% {top: 100px;}
  75% {top: 200px;}
  100% {top: 0px;}
}

И еще несколько анимаций

@-webkit-keyframes heightChange {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes heightChange {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1.0); }
}

Запишем анимацию блокам

.pre-loader > div {
  background-color: #fff;
  height: 100%;
  width: 10px;
  display: inline-block;
  -webkit-animation: heightChange 1s infinite ease-in-out;
  animation: heightChange 1s infinite ease-in-out;
}

И все, что осталось сделать, это добавить задержку анимации каждому блоку, чтобы они анимировались по очереди.

.pre-loader .box2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.pre-loader .box3 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.pre-loader .box4 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.pre-loader .box5 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

Вот и все! Вот так просто можно сделать прелоадер на чистом CSS3.

Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (17):

ababiy ababiy 13.05.2015 03:25:10

А демо есть? Без демо - голый код который думаешь, использовать, не использовать...

Ответить

GALAPERIDOL GALAPERIDOL 13.05.2015 09:46:21

Результат можно посмотреть на он-лайн генераторах типа данного: http://codepen.io/anon/pen/WvwxpK

Ответить

Sasha-saturn Sasha-saturn 13.05.2015 13:58:57

Все конечно красиво!Понимать бы, что каждое из свойств выполняет!?К примеру: @keyframes myMove

Ответить

php_programmer php_programmer 14.05.2015 17:24:13

Здесь используются абсолютно все изученные ранее свойства. Нет ничего нового. Если Вам не понятно какое-то свойство, вы можете ввести его в поиск(слева сверху на сайте), выбрать нужную статью и прочитать. Конкретно про анимации вот Вам статья - http://myrusakov.ru/animation.html Удачи! :)

Ответить

Gorbunko Gorbunko 13.05.2015 17:18:45

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

Ответить

php_programmer php_programmer 14.05.2015 17:22:23

Не совсем понял, что именно вы имеете ввиду.

Ответить

Gorbunko Gorbunko 15.05.2015 11:20:38

Ну прелоадер должен отображаться во время загрузки страницы, как это сделать?

Ответить

php_programmer php_programmer 15.05.2015 14:52:59

Ну, это нужно делать с помощью скриптов. В комментариях я Вам не смогу все описать.

Ответить

Gorbunko Gorbunko 15.05.2015 15:43:04

Если не трудно, сможете написать нужный скрипт для этого прелоадера на сайте https://jsfiddle.net ? Заранее спасибо :)

Ответить

php_programmer php_programmer 15.05.2015 20:34:39

Все, что Вам нужно сделать, это написать простой скрипт с if() {} else {} условием, где запускать прелоадер тогда, когда Вам это нужно. Самый простой способ конкретно с этим прелоадером это добавить к классу pre-loader свойство display со значением none и менять его на display со значением block, когда у Вас что-то происходит на сайте

Ответить

Gorbunko Gorbunko 16.05.2015 15:33:49

В js не разбираюсь вообще, практики не было, да и в теории не очень. Поэтому и не знаю что да как, вот и попросил Вас. А на счёт display none и block, это ничего не даст, потому что в css нету псевдоэлемента :onload.

Ответить

php_programmer php_programmer 16.05.2015 16:54:59

Причем здесь псевдоэлемент? Когда у Вас начинается какая-то работа(к примеру, вы удаляете 1 миллион записей), которая занимает продолжительное время, Вы просто скриптом меняете свойство display на block. Когда работа заканчивается, Вы опять же скриптом меняете свойство display на none. Вот и все. Чтобы убедиться, что это работает, Вы можете перейти по ссылке http://codepen.io/anon/pen/WvwxpK и там в классе .pre-loader добавить свойство display: none;, убедиться, что прелоадер исчез, вернуть свойство display в значение block и убедиться, что анимация снова работает. Теперь же все, что Вам осталось, это сделать абсолютно то же самое, но не вручную, а с помощью javascript. Попозже скину код.

Ответить

Gorbunko Gorbunko 16.05.2015 18:13:04

Мне надо чтобы прелоадер показывался во время загрузки. Как на сайте http://uquotes.net, а не во время удаления 1 миллиона записей. Я не знал как вставить этот прелоадер таким образом.

Ответить

php_programmer php_programmer 16.05.2015 19:20:53

Уже передумали спрашивать на форуме?) В любом случае я скидываю Вам код: http://codepen.io/anon/pen/gpMPBq Может быть, пригодится.

Ответить

php_programmer php_programmer 16.05.2015 19:21:19

Вот то, что вы имеете ввиду: http://codepen.io/anon/pen/pJbgYy

Ответить

Gorbunko Gorbunko 16.05.2015 21:37:46

Уже спросил,а за код спасибо. Но как сделать чтобы у него (прелоадера) был не прозрачный фон, а белый как на сайте http://uquotes.net ? Просто проблема в том что на главной странице (да и вообще на всех страницах) сайта есть картинки (прямо сразу как заходишь на страницу) и они мешают, но убрать их это не вариант. Если нужно поменять какое-то свойство в js коде, то просто скажите какое (сам я в js не разбираюсь вообще). За вашу помощь большое спасибо.

Ответить

mmush mmush 26.04.2018 12:27:35

Искал прелоадер без использования скрипта, попал сюда. Но у вас просто "как сделать анимацию на css". А для работы прелоадера все-равно нужен скрипт.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.