간이 CSS 수박 슬라이스 애니메이션 자습서

** 이 게시물은 이전에 Medium에 게시되었습니다.
최근에 나는 HTML과 CSS를 이용하여 작은 CSS 애니메이션을 만들기 시작했다. 나는 이 간단하고 재미있는 강좌가 초보자들에게 매우 좋다고 생각한다.또한 이 강좌에서 학습할 CSS 속성에 따라 다양한 CSS 이미지나 애니메이션을 만들 수 있습니다.가능성은 무궁하다!
설정
그래서 우선 수박 조각의 구성 성분을 찾아야 한다.다음과 같은 기능이 있습니다.

피부

고기

씨앗

HTML
수박을 구성하는 구성 요소를 고려하여 우리는 이제 HTML 코드를 작성하기 시작할 수 있다.

<div class="skin">
  <div class="flesh">
    <div class="seeds-container">
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
      <div class="seed"></div>
    </div>
  </div>
</div>

여기에 우리는 수박의 껍질을 대표할 뿐만 아니라 수박의 나머지 구성 요소로 용기를 만드는 skin이라는 div류가 있다.
그리고 과일 껍질 용기에는 수박의 붉은 과육을 대표하는 과육이 있다.
다음은 씨앗의 용기를 충당하는seeds container라는 div류가 있습니다.피드 용기를 사용하면 모든 피드를 동시에 제어할 수 있으며, 각각의 피드를 처리할 필요가 없습니다.
이것은 수박의 마지막 부분을 끌어낸다.씨앗 자체.이것은 네가 수박에 얼마나 많은 씨를 원하느냐에 달려 있지만, 여기서 나는 15개의 단독 씨를 썼다.
CSS
살결
다음에 수박을 만들기 위해서 HTML 코드를 스타일링해야 합니다.일반적으로, 나는 SCSS (CSS 프로세서) 를 사용하지만, 이것은 초보자 강좌이기 때문에, 나는 CSS를 사용할 것이다.
우리는 수박 껍질의 스타일링부터 시작할 것이다.

.skin {
  margin-top: 150px;  
  margin-right: auto;
  margin-left: auto;
  display: block;
  width: 400px;
  height: 200px;
 -webkit-border-bottom-right-radius: 400px;   
 -webkit-border-bottom-left-radius: 400px;
 -moz-border-radius-bottomright: 400px;   
 -moz-border-radius-bottomleft: 400px;  border-bottom-left-radius: 400px;
  border-bottom-right-radius: 400px;
  box-shadow: 2px 2px 5px black;
  background-color: green;
  transition: all 1s;
  cursor: pointer;
}

나는 왜 내가 모든 속성을 응용하는지 설명할 것이다.아래 피부.(이 부분을 뛰어넘고 싶은 분들은 아래로 스크롤하세요!)
이윤 상한: 150픽셀→ 이것은 세상을 바꿀 것이다.피부 레벨 150px는 가장자리 꼭대기에서 멀리 떨어집니다.
왼쪽 및 오른쪽 여백: 자동→ 이 두 속성은 한데 모인다.살결
가로: 400px, 높이: 200px→ 수박 조각의 모양은 반원이기 때문에 너비는 높이의 두 배다.
경계 왼쪽 아래 반경: 400px, 경계 오른쪽 아래 반경: 400px→ 반원 모양을 만들기 위해서는 이 두 속성을 적용해야 합니다. 이 두 속성은 우리 모델의 오른쪽 아래와 왼쪽 아래를 겨냥합니다.피부 용기이것은 밑부분의 두 각을 원형으로 만들 것이다.살결접두사를 붙이는 것을 잊지 마라.
섀도우 2px 2px 5px 블랙→ 나는 가벼운 3D 효과를 제공하기 위해 화면에 음영을 넣었다.피부 용기.
배경색:녹색→ 수박 껍질이 초록색이니까!
전환:모두 1→ 이것은 우리가 앞으로 수박 조각을 과도하는 데 도움이 될 것이다.이것은 과도를 늦추고 순조롭게 진행할 것이다.
커서:포인터→ 따라서 마우스를 수박 조각 위에 놓으면 커서가 포인터(즉 손가락 커서)로 바뀝니다.
육신
다음은 수박 조각의 과육이다.우리가 이곳에서 사용하는 속성은 우리가 피부에서 사용하는 속성과 거의 같다.

.skin .flesh {
  margin-right: auto;
  margin-left: auto;
  width: 350px;
  height: 180px;
  background-color: red;
 -webkit-border-bottom-right-radius: 350px;   
 -webkit-border-bottom-left-radius: 350px;
 -moz-border-radius-bottomright: 350px;   
 -moz-border-radius-bottomleft: 350px;  
  border-bottom-left-radius: 350px;
  border-bottom-right-radius: 350px;
}

우리는 오른쪽 거리와 왼쪽 거리를 사용하여 살을 가운데로 하고 피부 용기에서 가운데로 한다.피부 용기에 비해 고기 용기의 폭과 높이는 더 작다.이렇게 하면 우리는 수박 조각의 껍질과 고기를 볼 수 있다.배경색은 빨간색이다. 수박의 과육(즉 내부)은 빨간색이기 때문이다.과육 용기의 왼쪽 하단과 오른쪽 하단의 경계 반경은 350px이다.이것은 반원 모양을 만드는 원형 경계선을 만들 것입니다.접두사를 잊지 마라!
현재 상황은 다음과 같습니다.
피드 컨테이너와 피드
마지막으로 우리는 씨를 수박 조각에 넣었다.우리는 먼저 피드 용기를 정의한다.이것은 우리로 하여금 수박 조각의 씨앗의 위치를 결정할 수 있게 한다.우리는 수박의 씨앗이 과육에 나타나는 것을 알고 과육과 크기가 똑같은 씨앗 용기를 만들었다.따라서 씨앗 용기의 속성을 정의하는 데 사용될 것입니다. 과육 용기에 사용되는 속성과 비슷합니다. (그렇지 않으면)

.skin .flesh .seeds-container {
  width: 350px;
  height: 180px;
 -webkit-border-bottom-right-radius: 350px;   
 -webkit-border-bottom-left-radius: 350px;
 -moz-border-radius-bottomright: 350px;   
 -moz-border-radius-bottomleft: 350px;
  border-bottom-left-radius: 350px;
  border-bottom-right-radius: 350px;
  overflow: hidden;
}

우리가 여기에 추가한 추가 속성은 과육 용기에 추가되지 않고 넘쳐납니다.우리는 넘침을 숨기기로 설정합니다.이렇게 하면, 우리가 잠시 후에 피드를 삽입할 때, 피드가 용기를 초과하면, 피드는 숨겨집니다.
씨앗 용기와 과육 용기의 크기가 완전히 같고 같은 공간 면적을 덮을 수 있도록border 속성을 사용했습니다.
이제, 씨앗.

.skin .flesh .seeds-container .seed {
  margin-left: 18%;
  margin-top: 10%;
  display: inline-block;
  width: 5px;
  height: 2px;
  background-color: black;
 -ms-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);  
  transform: rotate(60deg);
}

잉여 이윤율:18%→ 이것은 씨앗 사이에 공간을 만들기 위한 것이다.각 종자와 왼쪽 다음 종자 사이에는 18%의 차이가 있다.
최대 이윤율: 10%→ 이것은 위 줄과 아래 줄의 피드 사이에 공간을 만들기 위해서입니다.
표시:인라인 블록→ 이것은 모든 피드를 하나의 블록으로 정의하고 그것들을 내연으로 구성한다.
너비: 5px, 높이: 2px→ 피드는 상대적으로 작습니다. 이것은 너비와 높이 값에 반영됩니다.
배경색:검은색→ 수박씨는 왕왕 검은색이다.
변환: 회전(60도)→ 시드를 시계 방향으로 60도 회전시키다.접두사를 추가하는 것을 잊지 마라. 이렇게 하면 다른 브라우저에서 일할 수 있다.
전환
이것은 초보자 강좌이기 때문에 나는 과도는 간단해야 하지만 동시에 매우 좋다고 생각한다.
커서가 수박 슬라이스 이미지 위에 걸려 있을 때, 우리가 응용할 애니메이션은 수박 슬라이스 이미지의 비율을 증가시킬 것이다.우리는 접두사를 추가하는 것을 잊지 않도록transform 속성을 사용할 것입니다.

.skin:hover {
   -webkit-transform: scale(1.1); 
   -ms-transform: scale(1.1); 
    transform: scale(1.1);
}

위의 코드 블록을 번역하려면 사용자가 마우스를 수박 조각의 CSS 이미지에 걸면 이미지의 크기가 증가합니다.그것은 1.1의 비율로 증가할 것이다.비록 우리는 복피 용기에 정지하여 응용할 것이지만, 변환 속성은 복피 용기의 전체 내용에 영향을 미치기 때문에 모든 부품의 비율이 증가할 것이다.
보시다시피 우리가 이전에 피부에 응용한 과도 속성에서 과도는 짝수 시간 계산 기능을 사용했다.이런 변화는 시작과 끝 모두 느려서 중간에서만 가속화된다.
이렇게!다음은 완성된 수박 슬라이스 애니메이션을 볼 수 있습니다!
만약 네가 성공한다면, 축하해!나는 네가 이 문장을 좋아하길 바란다.나는 처음에 그것을 가능한 한 간단하고 간단하게 하려고 했다.그것은 그다지 쓸모가 없다.다음까지!👋