떠다니는 고양이와 큐브

저는 프로젝트에 스타일을 추가할 수 있는 "자유" 시간을 갖고 싶었습니다. 약간의 상호작용이 페이지에 생명력을 더해줍니다.

떠다니는 고양이를 원하시나요? 괜찮아요. AI를 사용하여 고양이 이미지를 만들고 Illustrator에서 "손으로" 배경을 추출하여 .png 이미지에 대한 멋진 컷아웃 효과를 얻었습니다. 빵. 고양이.

물에 떠 있는 것처럼 보이도록 조금 움직여 보겠습니다. 제가 가장 좋아하는 CSS 애니메이션 중 하나는 궤도입니다. 정말 유용하고 이것으로 많은 일을 할 수 있습니다.

---

고양이

뷰에서는 고양이 이미지를 가져와서 "cat" 클래스를 할당합니다

<%= image_tag "favicon.png", alt:"vendor Booth", width:"40%", height:"40%", class:"cat" %>

이제 CSS 파일에서 '고양이'에 대한 스타일을 구축합니다. 고양이에서는 아래와 같이 애니메이션을 궤도라고 부릅니다.

여기서는 0도에서 시작하여 x 원점에서 15px 떨어진 "0도 각도에서 시작하여 고양이를 회전"하고 있음을 알 수 있습니다.

고양이는 15px 거리에서 360도 한 바퀴를 돌며 쭉 돌아갑니다. -360의 두 번째 회전은 첫 번째 회전을 취소하여 고양이를 똑바로 유지합니다. 애니메이션을 보시면 더 쉽습니다. XD.

우리는 그가 페이지 전체를 날아다니는 것을 원하지 않기 때문에 그를 아주 조금만 움직일 뿐입니다. 충분히 흥미로울 수 있습니다.

조금 왼쪽으로



조금 오른쪽.

마법!

---

입방체

저는 이전에 CSS로 큐브를 만드는 방법을 배웠습니다. 그것도 괜찮고 멋있지만, 오늘 큐브를 역동적인 방식으로 재사용하는 방법에 대한 멋진 아이디어를 얻었습니다. 저는 실시간으로 큐브 면에 데이터를 채우고 싶었습니다. 예를 들어, 다음 몇 가지 다가오는 이벤트입니다. 랜딩 페이지에서 재미있는 것을 발견하는 것과 같습니다. 왜 안 돼. 정말 흥미롭습니다.

그래서 저는 무엇보다도 뷰에 뼈대를 만듭니다. 우리 큐브에는 결국 집이 필요해요.

사용자가 큐브와 상호 작용할 수 있도록 몇 가지 라디오 버튼이 있습니다.

각 라디오 버튼은 서로 다른 큐브 면을 표시합니다.

각 얼굴에 표시하고 싶은 정보를 루프로 추가합니다.

각 버튼과 측면이 개별적으로 처리됩니다. 만약 존재한다면 좀 더 우아한 해결책을 보고 싶습니다.

효과가 있어서 정말 기쁩니다.

찾아주셔서 감사합니다!

위 내용은 떠다니는 고양이와 큐브의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!