clip-path를 사용하여 div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

이것은 어제 물어 본 질문에 대한 후속 질문입니다.clip-path를 사용하여 div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

내 목표는 박스를 만들고 SVG 그래픽을 상자에 밀어 넣으면서 그래픽이 움직일 때 상자 안에 있던 그래픽의 부분 만 볼 수 있었고 상자 밖에있는 부분은 숨겨진. 여기에 그 작품을 만든 코드는 다음과 같습니다

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
<body> 
    <br><br><br> 
    <div id="mydiv"> 
    <br><br><br> 
    <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a> 
    <br><br><br><br> 
    </div> 
</body>

CSS : 숨겨진 위치 : 기본적으로

body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;} 
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;} 
@keyframes mymove{from {left:-100%;} to {left:150%;}} 
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}

, 내가해야 할 일을했을 모든 오버 플로우 추가했다 상대 #mydiv가 작동하도록 만들었습니다. (왜 오버 플로우가 발생했는지 숨겨진 이유는 무엇입니까? 위치 : 친척은 왜 그런지 아직도 혼란 스럽습니다.)

이번에 제가 묻는 것은 클립 효과를 사용하여 동일한 효과를 얻는 다른 방법이 있습니까? path css 속성을 사용하여 사각형 내부에없는 움직이는 그래픽의 일부를 숨기는 사각형을 정의 할 수 있습니까? 실제로 클립 경로는 이미지가 키 프레임을 따라 움직일 때 브라우저가 이미지의 일부분을 그리는 것이 허용되는 위치를 정의하는 데 사용할 수 있습니까? 이론적으로는 나에게 합리적인 것처럼 보이지만 그런 식으로 구현하는 방법을 잘 모르겠습니다.

의견이 있으십니까? HTML과 CSS 만 사용하고 JavaScript는 사용하지 않으시겠습니까? 그러면 결과가이 작업과 동일하게 생성됩니까? 이 같은

https://jsfiddle.net/91p21odc/

출처

2017-12-31 Sindyr

아마 뭔가 :

body { 
 
    background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
#mydiv { 
 
    margin: 50px 0; 
 
    padding: 40px 0; 
 
} 
 

 
#swipe1 { 
 
    transition-timing-function: linear; 
 
    opacity: .62; 
 
    display: inline-block; 
 
    position: relative; 
 
    animation: mymove 7.85s forwards; 
 
} 
 

 
.clip { 
 
    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%); 
 
} 
 

 
@keyframes mymove { 
 
    from { 
 
    left: -100%; 
 
    } 
 
    to { 
 
    left: 150%; 
 
    } 
 
} 
 

 
#mydiv { 
 
    text-align: center; 
 
    background: black; 
 
    opacity: .5; 
 
    max-width: 50%; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    overflow: hidden; 
 
    border: 1px solid black 
 
}

<div id="mydiv"> 
 
    <div class="clip"> 
 
    <div id="swipe1"> 
 

 
     <img src="https://www.benngrant.com/html5/shape1.svg" /> 
 
    </div> 
 
    </div> 
 
</div>

출처

2017-12-31 08:09:42

흥미 롭. SVG가 절반으로 줄었습니다. 나는 당신의 코드로 약간 놀고 나중에 답장을 할 것이다. - 고마워! :) – Sindyr

@ 신디어 반,하지만 exaclt 100px;) .. 내가 내가 당신이 SVG의 일부만을 볼 수 있고 컨테이너 안의 애니메이션을 원한다고 생각했기 때문에 내가 필요한 것을 분명히 이해하지 못했기 때문에 이것을 만들었습니다. –

Ahh , 내가 원하는 것은 애니매이션 SVG가 나타날 수있는 사각형을 설정하기 위해 clip-path를 사용하기 위해 a/div가 필요하지 않다는 것입니다. 그래서 처음 실행될 때 우리는 코의 끝을 봅니다. 이미지가 나타나면 전체 이미지가 보입니다. 그리고 처음부터 떠나면 코가 클립 경로 사각형의 가장자리에 부딪혀 사라지는 것을 볼 수 있습니다. 그런 다음 나머지는 사라집니다. 애니메이션이 움직이면서 클립 패스 직사각형이 고정되어있는 것처럼 - 이해가 되나요? – Sindyr

clip-path를 사용하여 div 외부에서 애니메이션을 클립하는 방법은 무엇입니까?

답변

관련 문제