배경에 따라 다른 이미지가있는 CSS 애니메이션

debugcn 에 게시 Dev

Prasad AU

CSS 애니메이션을 사용하여 배경색에 따라 다른 이미지를 표시하고 있지만 이미지 위치를 변경해서는 안되며 배경색 애니메이션이 아래에서 위로 발생해야하며 배경색 채우기가 있어야합니다. 해당 특정 배경에 대한 각 이미지를 볼 수 있어야합니다. 호버 색상.

HTML

div class="card">
  <div class="card-img">
    <div>
        <img src="../../images/assets/kidney_empty.svg" alt="">
    </div>
    <div>
        <img src="../../images/assets/kidneys_rev.svg" alt="">
    </div>
  </div>
  <div class="card-body">
    <div class="content-selector-wrapper">
      <paragraph>
        <p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
      </paragraph>
    </div>
  </div>
</div>

CSS

.mult-image-animation {
  text-align             : center;
  }
  .mult-image-animation .card-img {
    width                : 150px;
    height               : 150px;
    border-radius        : 50%;
    overflow             : hidden;
    margin-bottom        : 35px;
    position             : relative;
    margin-left          : auto;
    margin-right         : auto;
    }
    .mult-image-animation .card-img > div {
      position           : absolute;
      width              : 150px;
      height             : 150px;
      margin-left        : auto;
      margin-right       : auto;
      padding            : 40px 30px;
      max-width          : 100%;
      top                : 0;
      bottom             : 0;
      right              : 0;
      left               : 0;
      margin             : auto;
      height             : 150px;
      -webkit-transition : all ease 3s;
      -moz-transition    : all ease 3s;
      transition         : all ease 3s;
      }
    .mult-image-animation .card-img div:first-child {
      z-index            : 1;
      }
  .mult-image-animation .card-body {
    padding              : 0;
    font-size            : 18px;
    color                : #4D4D4F;
    font-family          : "Merriweather", Helvetica, Arial, sans-serif;
    }
    .mult-image-animation .card-body strong {
      font-family        : "Merriweather-Bold", Helvetica, Arial, sans-serif;
      }
  .mult-image-animation.trigger-animation .card-img div:last-child {
    box-shadow           : inset 0 -70px 0 0 #EA1010;
    z-index              : 5;
    }

애니메이션과 배경 이미지를 가져올 수 있지만 마우스를 가져 가면 이전 이미지가 숨겨 지지만 전환이 완료되면 이전 이미지를 숨기고 싶습니다. 이렇게 윤곽선과 단색 이미지를 모두 볼 수 있어야하는 곳

JS Fiddle Image https://jsfiddle.net/prasadau1989/m9abLo4f/ SVG에서 이것을 달성하는 방법이 있습니까? https://jsfiddle.net/prasadau1989/m9abLo4f/1/

모든 가이드를 높이 평가합니다.

브랜든 맥코넬

당신은 실제로 꽤 가깝고 SVG는 좋은 아이디어였습니다! SVG를 사용하면 컨텍스트에 따라 원하는대로 요소의 채우기 색상을 쉽게 바꿀 수 있습니다.

기본적으로 반전 된 색상으로 동일한 요소를 두 번 만들고 싶지만 전혀 엉망이되지 않습니다 z-index. 대신, clip-path맨 위에서 완전히 잘 리도록 이미 설정된 hover-state에 대한를 만듭니다 .

.mult-image-animation .card-img > div:last-child {
    clip-path: inset(100% 0% 0% 0%);
}

그런 다음 마우스 오버시 해당 100%값을 다시로 설정 0%하여 설명 된대로 애니메이션이 맨 아래에서 시작되는 애니메이션을 만듭니다.

여기에 모두 합쳐졌습니다.

:root {
    --static-color: #fff;
    --accent-color: #ea1010;
}

.mult-image-animation {
    text-align: center;
}

.mult-image-animation .card-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 35px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    box-shadow: inset 0 0 0 4px var(--accent-color);
}

.mult-image-animation .card-img > div {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 15px;
    transition: all 0.5s ease-out;
    box-sizing: border-box;
    overflow: hidden;
    z-index: -1;
}

.mult-image-animation .card-img > div:first-child {
    background-color: var(--static-color);
}

.mult-image-animation .card-img > div:first-child > svg {
    fill: var(--accent-color);
}

.mult-image-animation .card-img > div:last-child {
    background-color: var(--accent-color);
    -webkit-clip-path: inset(100% 0% 0% 0%);
            clip-path: inset(100% 0% 0% 0%);
}

.mult-image-animation .card-img > div:last-child > svg {
    fill: var(--static-color);
}

.mult-image-animation .card-body {
    padding: 0;
    font-size: 18px;
    color: #4D4D4F;
    font-family: "Merriweather", Helvetica, Arial, sans-serif;
}

.mult-image-animation .card-body strong {
    font-family: "Merriweather-Bold", Helvetica, Arial, sans-serif;
}

.mult-image-animation:hover .card-img div:last-child {
    -webkit-clip-path: inset(0% 0% 0% 0%);
            clip-path: inset(0% 0% 0% 0%);
}

img {
    max-width: 100%;
}

<div class="mult-image-animation">
    <div class="card">
        <div class="card-img">
            <div>
                <svg width="100px" height="100px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path d="m50 11.668c-1.25 0-2.082 0.83203-2.082 2.082v72.293c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-72.293c0-1.043-0.83203-2.082-2.082-2.082z" />
                    <path d="m100 33.75c-0.20703-10.418-3.332-18.125-9.375-22.707-9.375-7.5-22.293-4.793-22.5-4.5859-3.957 0.83203-11.043 5.418-13.75 12.5-1.457 3.75-1.875 9.375 2.918 16.043 2.293 3.125 8.332 4.793 11.875 8.543l-1.25 0.20703c-5.418 1.043-9.582 5.832-9.582 11.457v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-37.289c0-3.543 2.5-6.668 6.043-7.293l2.5-0.41797c0.625 2.918 0 5.832-1.668 8.125-6.25 8.332-0.83203 20.832 13.332 20.832 3.957 0 8.75-1.668 12.5-9.168 3.9609-7.0781 5-21.871 4.793-33.328zm-8.332 31.457c-4.582 8.543-9.375 7.082-13.957 6.043-5.832-1.457-8.543-8.332-4.793-13.125 2.5-3.332 3.332-7.5 2.5-11.668-0.20703-0.83203-0.41797-1.668-0.83203-2.293-3.125-6.668-11.875-8.957-13.75-11.457-2.918-4.168-3.75-8.125-2.293-12.082 1.875-6.043 7.9141-9.582 10.625-10.207 4.793-1.043 13.332-0.625 18.957 3.75 5 3.957 7.707 10.418 7.707 19.582 0.21094 10.625-0.83203 25-4.1641 31.457z" />
                    <path d="m31.875 6.457c-0.20703 0-13.125-2.9141-22.5 4.5859-6.043 4.793-9.168 12.5-9.375 22.707-0.20703 11.457 0.83203 26.25 4.582 33.332 3.957 7.293 8.543 9.168 12.5 9.168 13.957 0 19.582-12.5 13.332-20.832-1.668-2.293-2.293-5.207-1.668-8.125 2.082 0.41797 8.543 1.043 8.543 7.707v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082l0.003906-37.082c0-5.207-3.332-10.207-10.625-11.668 3.543-3.75 9.582-5.418 11.875-8.543 4.793-6.668 4.168-12.293 2.918-16.043-2.707-6.8711-9.793-11.453-13.75-12.289zm7.5 25.836c-2.082 2.707-12.5 5.418-14.582 13.75-1.043 4.168 0 8.543 2.5 11.668 3.543 4.582 1.457 11.457-5.207 13.332-4.375 1.043-9.168 2.293-13.543-6.043-3.332-6.25-4.375-20.832-4.168-31.25 0.20703-9.168 2.707-15.625 7.707-19.582 5.832-4.582 14.168-4.793 18.957-3.75 2.5039 0.625 8.543 4.1641 10.629 9.7891 1.457 3.9609 0.625 8.125-2.293 12.086z" />
                </g>
            </svg>
            </div>
            <div>
                <svg width="100px" height="100px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <g>
                    <path d="m50 11.668c-1.25 0-2.082 0.83203-2.082 2.082v72.293c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-72.293c0-1.043-0.83203-2.082-2.082-2.082z" />
                    <path d="m100 33.75c-0.20703-10.418-3.332-18.125-9.375-22.707-9.375-7.5-22.293-4.793-22.5-4.5859-3.957 0.83203-11.043 5.418-13.75 12.5-1.457 3.75-1.875 9.375 2.918 16.043 2.293 3.125 8.332 4.793 11.875 8.543l-1.25 0.20703c-5.418 1.043-9.582 5.832-9.582 11.457v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-37.289c0-3.543 2.5-6.668 6.043-7.293l2.5-0.41797c0.625 2.918 0 5.832-1.668 8.125-6.25 8.332-0.83203 20.832 13.332 20.832 3.957 0 8.75-1.668 12.5-9.168 3.9609-7.0781 5-21.871 4.793-33.328zm-8.332 31.457c-4.582 8.543-9.375 7.082-13.957 6.043-5.832-1.457-8.543-8.332-4.793-13.125 2.5-3.332 3.332-7.5 2.5-11.668-0.20703-0.83203-0.41797-1.668-0.83203-2.293-3.125-6.668-11.875-8.957-13.75-11.457-2.918-4.168-3.75-8.125-2.293-12.082 1.875-6.043 7.9141-9.582 10.625-10.207 4.793-1.043 13.332-0.625 18.957 3.75 5 3.957 7.707 10.418 7.707 19.582 0.21094 10.625-0.83203 25-4.1641 31.457z" />
                    <path d="m31.875 6.457c-0.20703 0-13.125-2.9141-22.5 4.5859-6.043 4.793-9.168 12.5-9.375 22.707-0.20703 11.457 0.83203 26.25 4.582 33.332 3.957 7.293 8.543 9.168 12.5 9.168 13.957 0 19.582-12.5 13.332-20.832-1.668-2.293-2.293-5.207-1.668-8.125 2.082 0.41797 8.543 1.043 8.543 7.707v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082l0.003906-37.082c0-5.207-3.332-10.207-10.625-11.668 3.543-3.75 9.582-5.418 11.875-8.543 4.793-6.668 4.168-12.293 2.918-16.043-2.707-6.8711-9.793-11.453-13.75-12.289zm7.5 25.836c-2.082 2.707-12.5 5.418-14.582 13.75-1.043 4.168 0 8.543 2.5 11.668 3.543 4.582 1.457 11.457-5.207 13.332-4.375 1.043-9.168 2.293-13.543-6.043-3.332-6.25-4.375-20.832-4.168-31.25 0.20703-9.168 2.707-15.625 7.707-19.582 5.832-4.582 14.168-4.793 18.957-3.75 2.5039 0.625 8.543 4.1641 10.629 9.7891 1.457 3.9609 0.625 8.125-2.293 12.086z" />
                </g>
            </svg>
            </div>
        </div>
        <div class="card-body">
            <div class="content-selector-wrapper">
                <paragraph>
                    <p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
                </paragraph>
            </div>
        </div>
    </div>
</div>

이게 도움이 되길 바란다! 댓글에 후속 질문이 있으면 언제든지 문의 해주세요. 건배!

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-28

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

배경에 따라 다른 이미지가있는 CSS 애니메이션

배경에 따라 다른 이미지가있는 CSS 애니메이션

steps () 함수가있는 CSS 이미지 스프라이트 애니메이션이 내 이미지에서 작동하지 않습니다.

브라우저 유형에 따라 다른 CSS 배경 이미지를 사용할 수 있습니까?

CSS svg 애니메이션에서 Animate Á 개체가 경로를 따라갈 수 없습니다.

이미 인라인 배경 이미지가있는 요소에 다른 배경 이미지 추가

드롭 컨테이너에 따라 다른 cdk-drag-preview 애니메이션

CSS 전환 배경 이미지가 페이드 인되지만 애니메이션 크기는 아닙니다.

CSS 배경 위치가 오른쪽에서 왼쪽으로 애니메이션

CSS 배경 슬라이드 쇼 애니메이션

CSS 애니메이션에 다른 단계 추가

사이트에 따라 CSS 배경 이미지 변경

iOS에서 신속하게 다른 색상으로 그라데이션 배경 다시 애니메이션

애니메이션이 css3에서 다른 애니메이션을 트리거 할 수 있습니까?

애니메이션이 css3에서 다른 애니메이션을 트리거 할 수 있습니까?

CSS 배경 그라디언트 동적 애니메이션

끝없는 애니메이션 CSS 기울어 진 그라데이션 배경

HTML의 내용에 따라 확장 된 CSS 배경 이미지

서로 다른 경로를 따라 두 개의 SVG 애니메이션 동기화

CSS를 사용하는 배경 이미지에 문제가 있습니다.

PHP GD는 항상 이미지 배경색을 따라 png 이미지에 텍스트를 추가합니다.

CSS 배경 이미지에 문제가 있습니다.

python pygame 배경 이미지는 화면 크기에 따라 변경됩니다.

href css 애니메이션 (배너)이있는 이미지가 작동하지 않음 (FireFox에서만)

시간에 따라 UIView 배경 이미지를 변경하는 방법 (빠른)

이미지 스타일에 따라 다른 CSS 스타일 동작

다른 요소에 CSS3 애니메이션이있는 경우 IE10에 링크가 표시되지 않음

반복되는 SwiftUI 애니메이션은 시간이 지남에 따라 고르지 않습니다.

Swift : 애니메이션 경로를 따라 개체 애니메이션

jQuery는 CSS 또는 애니메이션을 변경하지 않습니다 ... 내가 뭘 잘못하고 있니?

Firefox에서 CSS 애니메이션 규칙이 사라지고 애니메이션이 없음