5월 4일

5월 4일입니다. 날짜를 말한 이후로 팬들에게는 스타워즈 데이로 알려져 있습니다. 5월 4일은 "포스가 당신과 함께하길"이라는 문구처럼 들립니다. 저는 다양한 시기에 몇 개의 스타워즈 프로젝트를 만들었습니다. May the fourth fun의 일부로 여기에서 공유하겠습니다.

CSS에서 스타워즈 크롤링

CSS 애니메이션을 사용한 Star Wars의 오프닝 크롤링. 튜토리얼을 완료한 다음 프로젝트를 확장했습니다. 튜토리얼을 할 때 항상 수정하고 무언가를 추가하십시오. 코드를 배우는 좋은 방법입니다.

내 버전을 볼 수 있음in action here

내 변경 사항

별의 두 번째 섹션을 추가하고 불투명도를 변경하여 별 필드에 깊이를 더했습니다

.

극장 느낌을 위해 화면 상단과 하단에 와이드스크린 막대를 추가했습니다.

와이드스크린에 작은 테두리가 생겼습니다.

텍스트의 세 단락을 만들었습니다. (원래 버전은 하나만 있었습니다).

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 스웨터 아트 시리즈를 했습니다. 이 게시물의 모든 이미지는 해당 시리즈에서 가져온 것입니다. 처음이었다. , 및 를 포함하는 시리즈입니다. 임페리얼 로고는 이 게시물의 표지 이미지입니다.

기타 5월 4일 게시물

스타워즈는 인기가 많기 때문에 여기 DEV에 스타워즈 주제 게시물이 많이 있는 것은 놀라운 일이 아닙니다.

DEV가 5월 4일 코스튬 이벤트를 진행하고 있습니다. 5월 4일 배지를 위해 스타워즈 의상으로 당신의 선택을 게시하세요.

다른 크롤링 자습서
, Glaucia Lemos의 Star Wars Crawl 구축에 관한 3부작 시리즈입니다.

StarWarsDay를 위한 12개의 오픈 소스 프로젝트
일부 스타워즈 프로젝트 목록입니다.

CSS 라이트세이버
Oryam의 단일 div 라이트 세이버.

다른 스타워즈 게시물을 알고 계십니까? 댓글에 적어주세요.

네 번째가 당신과 함께하기를 바랍니다.

-$JarvisScript git push

여기 또는 Twitter에서 저를 팔로우하세요.






크리스 자비스 | 풀스택 개발자 | 선적 서류 비치









dev.to/jarvisscript/m…의 "5월 4일"


오후 13:23 - 2022년 5월 4일