4 мая

Сегодня 4 мая. Известный фанатам как День Звездных войн, поскольку произношение даты. Четвертое мая звучит как фраза «Да пребудет с тобой Сила». В разное время я сделал несколько проектов по «Звездным войнам». Я поделюсь ими здесь как частью веселья четвертого мая.

Ползком по «Звездным войнам» в CSS

Этот учебник Кристофера Кейда воссоздает вступительную сцену из «Звездных войн» с помощью CSS-анимации. Я закончил учебник, а затем расширил проект. Когда вы делаете учебник, всегда возитесь с ним и что-то добавляйте. Это хороший способ изучить код.

Мою версию можно увидеть в действии здесь

Мои изменения

  • Добавлена вторая секция звезд и изменена непрозрачность для придания большей глубины звездному полю
  • Добавлены широкоэкранные полосы сверху и снизу экрана для театрального вида.
  • Придал широкоформатному экрану небольшую границу.
  • Сделал три абзаца текста. (в первоначальной версии был только один).
  • Использовал JavaScript для замены всех слов в абзацах на одно и то же слово.
  • Создал JS-анимацию экрана загрузки.
  • Анимированные истребители галстуков в нижней части экрана. Эти истребители галстуков позже будут использованы в нескольких CSS-дизайнах уродливых свитеров.

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

<footer>
  <div class="footer"> <p id="ties"> |-O-| &nbsp; {-o-} &nbsp; |-O-|  &nbsp;&nbsp;</p> </div>
</footer>

Вход в полноэкранный режим Выход из полноэкранного режима
.footer {
height: 75px;
background: #000;
z-index: 10;
position: absolute;
width:100%;
bottom:0px;
border-top: 1px solid #6b6936;
text-align: right;
}

#ties {
  position: absolute;
  top: 25%;
  animation-delay: 42s;
  -webkit-animation-delay: 42s;
  animation: ties 16s ease-out 42s;
  animation-iteration-count: 3;
  color: #999;
  width: 100%;
}


@keyframes ties {
  from {
    right: 0;
  }
  to {
    right: 100%;
  }

#ties:after{
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Уродливый свитер CSS «Звездные войны

Я сделал серию рисунков CSS свитера персонажей «Звездных войн». Все изображения в этом посте — из этой серии. BB-8 был первым. В серию также вошли Дитя, Вампа, Звезда Смерти и Имперский логотип. Имперский логотип является изображением обложки этого поста.

Другие посты, посвященные 4 мая

Звездные войны очень популярны, поэтому неудивительно, что на DEV есть много тематических постов, посвященных Звездным войнам.

DEV проводит костюмированное мероприятие, посвященное Четвертому мая. Опубликуйте свою фотографию в костюме «Звездных войн», чтобы получить значок «Четвертое мая». Конкурс костюмов на DEV

Еще один учебник по краулингу
Создание Star Wars Crawler с помощью Azure Static Web Apps, серия из трех частей о создании Star Wars Crawl от Глаусии Лемос.

12 проектов с открытым исходным кодом для StarWarsDay
12 проектов с открытым исходным кодом для StarWarsDay Список некоторых проектов по «Звездным войнам».

CSS LightSaber
Световой меч Oryam с одним div.

Знаете ли вы другие посты о «Звездных войнах»? Напишите о них в комментариях.

Да пребудет с вами четвертый.

-$JarvisScript git push
Вход в полноэкранный режим Выход из полноэкранного режима

Следуйте за мной здесь или в Twitter.

Крис Джарвис | Fullstack Developer | Документация
@jarvisscript
«May the 4th» от @JarvisScript #DEVCommunity dev.to/jarvisscript/m…
13:23 PM — 04 мая 2022 г.

Оцените статью
Procodings.ru
Добавить комментарий