프런트 엔드의 이미지 위로 마우스를 이동할 때 플래시 CSS3 효과를 만드는 방법

2~3년 전, 지 형제님이 아직 학생이었을 때 이 웹사이트의 프런트 엔드 페이지를 만들었습니다. 사실 이 웹사이트에는 이제 형제님의 작업을 모두에게 보여주기 위해 게시물을 올릴 기회가 생겼습니다. 어리고 무식했던 지....
오늘은 JD.com에서 쇼핑하다가 우연히 사진 위로 마우스를 이동할 때 반사되는 깜박임 효과를 만드는 방법에 대해 이야기해 보겠습니다. 아래에서 완성품 시연을 살펴보겠습니다. 그렇지 않으면 어떤 효과를 만들어야 할지 오랫동안 이야기해 왔는데, 아, 그런데 이 상황을 뭐라고 부르나요? "어색한 채팅"



보시다시피 오늘의 기사는 이 효과를 얻는 방법에 관한 것입니다
              - Ps: HTML 기초가 조금 있는 사람들은 쉽게 이해할 수 있지만 기초가 없는 사람들은 더 어려울 수 있습니다.
먼저 코드를 게시해 보겠습니다.

<div><a><img  src="/static/imghw/default1.png" data-src="aaa.jpg" class="lazy" alt="프런트 엔드의 이미지 위로 마우스를 이동할 때 플래시 CSS3 효과를 만드는 방법" ></a></div>

위는 html의 코드입니다. 많지도 않고 비교적 간단합니다. 핵심은 뒤에 있는 CSS 코드를 주의 깊게 읽고 분석해야 한다는 것입니다. 많은 CSS3 지식 포인트가 참여했습니다

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码，就不一一解释了

위의 Ji 형제는 단순히 모든 사람에게 보여주기 위해 데모를 작성했습니다. 사실 뒤에 있는 반사 스타일 코드도 복사되었습니다. 지 형제 님. 오랫동안 작성하지 않았는데 복사하는 것이 가능합니다. 이해하지 못하는 코드는 Baidu를 사용하면 이해할 수 있습니다. 그것.

구체적인 이론은 a 태그 위에 투명 레이어를 추가하고 위치 지정을 통해 a 태그에 누르는 것입니다. 이 투명 레이어는 위 코드의 이전 레이어입니다. 물론 다른 태그일 수도 있습니다. 그런 다음 CSS3 마우스를 사용하여 과도한 스타일링을 통해 투명 레이어를 오른쪽으로 밀어 이러한 반사 효과를 얻습니다.

알겠습니다. 구체적인 방법을 공유해 드렸습니다. 자신의 프로젝트에 사용하려면 html+css에 대한 기본 지식이 있어야 합니다. 그렇지 않으면 어려울 것입니다.

아래에는 제가 방금 작성한 데모가 패키지되어 있습니다. 잘 이해되지 않으면 다운로드하여 주의 깊게 공부할 수 있습니다.

원본 링크: 프런트 엔드의 이미지 위로 마우스를 슬라이드할 때 CSS3 플래시 효과를 만드는 방법은 무엇입니까?

위 내용은 프런트 엔드의 이미지 위로 마우스를 이동할 때 플래시 CSS3 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!