다음과 함께 애니메이션, 클릭 가능한 카드 만들기

간단하게 유지하기 위해 클래스를 사용하는 대신 요소를 CSS에 직접 배치합니다. ::after 이 데모의 경우 링크를 호버링하기 위해 카드에 이미지 스케일링과 그림자를 추가하여 화살표가 팝업되어 링크의 텍스트 색상을 변경할 수 있습니다. 운영을 단순화하기 위해 카드에 스코어링 된 사용자 정의 속성을 추가합니다. 이것은 기본 스타일입니다 :

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

로그인 후 복사

로그인 후 복사

아주 좋아요! 초기 스케일링 (), 카드 제목 ()의 초기 색상 및 링크에서 화살표를 팝업하는 데 사용할 추가 속성을 추가했습니다. 우리는 또한 --img-scale: 1.001 선언의 빈 상태를 나중에 애니메이션으로 설정했습니다. 이것은 우리가 지금 만들어야 할 클릭 가능한 카드의 기초를 설정하므로, 우리가 원하는 요소에 이러한 사용자 정의 속성을 추가하여 리셋과 스타일을 추가 해 봅시다 : . --title-color: black 링크 뒤의 스크린 리더에 숨겨진 클래스를 사용자 친화적으로 추가합시다. box-shadow 우리의 카드는 아름답게 보이기 시작합니다. 이제 마법을 추가 할 시간입니다. 를 추가 할 수 있습니다. 이 소량의 CSS 코드를 사용하면 카드가 진정으로 생겨납니다.

위의 내용을 보셨습니까? 이제 카드의 하위 요소가 호버링되거나 집중되면 업데이트 된 스타일을 얻게됩니다. 링크 요소가 클릭 가능한 카드 메소드에 호버 또는 초점 상태를 포함 할 수있는 유일한 요소이더라도 부모 요소와 일치하고 변환을 적용하는 데 사용할 수 있습니다.

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

로그인 후 복사

로그인 후 복사

<.> 그게 다야. 선택기를위한 또 다른 강력한 사용 사례. 다른 요소를 매개 변수로 선언하여 부모 요소와 일치 할 수있을뿐만 아니라 의사 클래스를 사용하여 부모 요소의 스타일을 일치시키고 설정합니다.

프로 :

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Animated, Clickable Cards With the :has() Relational Pseudo Class "><div clas="article-body">
    <h2>Some Heading</h2>
    <p>Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.</p>
    <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b">
      Read more
       <svg fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg></a>
  </div>

로그인 후 복사

접근 가능 애니메이션을 설정할 수 있습니다 JavaScript가 필요하지 않습니다 올바른 요소에서 사용 :has() box-shadow

단점 :

/* 卡片元素 */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;

  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: //m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* 链接的::after伪元素 */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

로그인 후 복사

텍스트는 선택하기 쉽지 않습니다. 브라우저 지원은 Chrome 및 Safari (Firefox에서는 로고 뒤에 지원됩니다)로 제한됩니다. ::after 이것은이 기술을 사용하는 데모입니다. 카드 주위에 여분의 래퍼가 표시 될 수 있지만, 이것은 컨테이너 쿼리를 사용할 때 내가 만든 몇 가지 시도 일뿐입니다. 이는 모든 주요 브라우저에서 시작되는 다른 훌륭한 기능 중 하나입니다.

공유하고 싶은 다른 예가 있습니까? 의견 섹션은 다른 솔루션이나 아이디어에 매우 환영합니다.