CSS3를 사용하여 개 귀 효과를 얻는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3를 사용하여 개 귀 효과를 얻는 방법

不言

Jun 20, 2018 pm 02:42 PM

css3

이 글에서는 주로 CSS3를 사용하여 모서리 접기 효과를 소개합니다. 마우스를 그림 위로 이동하면 모서리 접기 효과가 표시되므로 누구나 쉽게 이해하고 배울 수 있습니다. .함께 배워봅시다.

정적 렌더링을 먼저 살펴보겠습니다

예제 코드

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  body {
   background-color: #eaf0f2;
  }
   h1{text-align: center;}
   .box{width:500px;height:300px;margin:0 auto;position:relative;}
   .img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;}
   .img-layer img {width: 500px;cursor: pointer;}
   .img-layer:before{ content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: rgba(0,0,0,0.2) #fff;
    border-radius: 0 0 0 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -webkit-transition: all 0.4s ease-out;
    transition:all 0.4s ease-out;}
  .img-layer:hover:before{
    border-right-width:100px;
    border-bottom-width:100px;
  }
  </style>
 </head>
 <body>
  <h1 id="折角效果">折角效果</h1>
  <p class="box">
   <p class="img-layer">
     <img  src="/static/imghwm/default1.png"  data-src="<a href="  class="lazy"  http://p6.qhimg.com/d/inn/3f563406/table.jpg" alt="CSS3를 사용하여 개 귀 효과를 얻는 방법" >http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
   </p>
  </p>
 </body>
</html>

위는 이 글의 전체 내용입니다. 모두의 학습, more 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 기사

'CSS4'업데이트Apr 11, 2025 pm 12:05 PM

내가 CSS4¹에 처음으로 차지했기 때문에, 그것에 대해 많은 논의가있었습니다. 나는 여기 다른 사람들로부터 내가 가장 좋아하는 생각을 마무리하려고 할 것입니다. 거기 있습니다

세 가지 유형의 코드Apr 11, 2025 pm 12:02 PM

새 프로젝트를 시작할 때마다 원하는 경우 세 가지 유형 또는 카테고리로보고있는 코드를 구성합니다. 그리고 나는 이러한 유형을 적용 할 수 있다고 생각합니다

HTTPS는 쉽습니다!Apr 11, 2025 am 11:51 AM

나는 HTTPS의 복잡성을 공개적으로 비난하는 것에 대해 유죄를 선고했다. 과거에는 타사 공급 업체로부터 SSL 인증서를 구매했으며 문제가있었습니다.

HTML 데이터 속성 안내서Apr 11, 2025 am 11:50 AM

HTML, CSS 및 JavaScript의 데이터 속성에 대해 알고 싶었던 모든 것.

자바 스크립트의 불변성 이해Apr 11, 2025 am 11:47 AM

이전에 JavaScript에서 불변성으로 작업하지 않은 경우 변수를 새로운 값 또는 재 할당과 혼동하기가 쉽습니다.

시맨틱하고 액세스 가능한 상태를 유지하면서 요즘 사용자 정의 확인란, 라디오 버튼 및 토글 스위치를 만들 수 있습니다. 우리는조차 필요하지 않습니다

각주 문자Apr 11, 2025 am 11:34 AM

각주에 적합한 특수 슈퍼 세트 번호 문자가 있습니다. 여기에 다음과 같습니다.

HTML, CSS 및 JavaScript로 애니메이션 카운트 다운 타이머를 만드는 방법Apr 11, 2025 am 11:29 AM

프로젝트에 카운트 다운 타이머가 필요한 적이 있습니까? 그런 것은 플러그인에 도달하는 것이 당연하지만 실제로는 훨씬 더 많습니다.

See all articles

핫 AI 도구

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.