jQuery HTML CSS 효과

-2

jQuery/HTML/CSS를 단독으로 사용하여 블록 요소를 왼쪽 하단 모서리에서 오른쪽 상단으로 대각선으로 전환 할 수 있습니다. 그래서 삼각형 모양은 블록이 채워질 때까지 전환 기간을 채 웁니다.jQuery HTML CSS 효과

나는 CSS3 전환을 지원하지 않는 브라우저를 사용하는 사용자가 있기 때문에이 후입니다. 이상적으로이 크롬과 IE8에서 모두 작동 할 것은 시간이 지나면,이 내가 얻은 것을

입니다 + :

IE8에서 작동 + | 크롬 | 파이어 폭스

http://jsfiddle.net/yYK9b/

CSS

div.arrow { 
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent; /* left arrow slant */ 
    border-right: 50px solid transparent; /* right arrow slant */ 
    border-bottom: 50px solid #bb0000; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
    bottom: 0; 
    position: absolute; 
} 
div.cover { 
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent; /* left arrow slant */ 
    border-right: 50px solid transparent; /* right arrow slant */ 
    border-bottom: 50px solid #FFF; /* bottom, add background color here */ 
    font-size: 0; 
    line-height: 0; 
    bottom: -1px; 
    left: 0px; 
    z-index: 100; 
    position: absolute; 
} 
div.topLeft { 
    overflow: hidden; 
    position: absolute; 
    height: 300px; 
    width: 300px; 
    border: 1px solid #bb0000; 
} 
div.topRight { 
    overflow: hidden; 
    position: absolute; 
    left: -2px; 
    top: -2px; 
    height: 300px; 
    width: 300px; 
    border: 1px solid #bb0000; 
} 
div.wrap { 
    overflow: hidden; 
    position: absolute; 
    height: 300px; 
    width: 300px; 
    border: 0px solid #bb0000; 
}

HTML

<div class="wrap"> 
    <div class="topLeft"></div> 
    <div class="topRight"></div> 
    <div class="cover"></div> 
    <div class="arrow"></div> 
</div>

JQuery와

$(".wrap").hover(function(){ 
     arrow = $(this).find(".arrow"); 
     $(arrow).stop().animate({ 
      borderBottomWidth: "600px", 
      borderRightWidth: "600px" 
     }, 500) 
},function(){ 
     arrow = $(this).find(".arrow"); 
      $(arrow).stop().animate({ 
      borderBottomWidth: "50px", 
      borderRightWidth: "50px" 
     }, 500) 
});

출처

2013-09-01 goingsideways

예 가능합니다. 다른 질문? – Dom

네, javascript/jQuery로 가능하지만 우리는 할 수 없습니다. 너 뭐 해봤 니? 시도하지 않고이 주제가 닫힐 수 있습니다 ... – Xarcell

Dom, 통찰력과 도움 – goingsideways

가능해야합니다. 너는 사각형 인 블록이 있다고 가정 해보자. overflow: hidden. 그 다음에는 그 안의 정사각형을 가지고 있습니다. jquery animate 속성을 사용하면 내부 블록의 위치를 애니메이션하여 0px/0px 위치로 이동합니다.

너무 게으르므로 이미지를 만들지는 못했지만 대신 이미지를 사용하면 독점적 인 CSS 규칙을 제거 할 수 있습니다. 이 예제에서와 같이 CSS를 사용하여 정사각형을 회전시키는 방법에 대해 설명합니다.

출처

2013-09-01 00:45:15 JakeParis

최상의 대답과 해결책 – goingsideways

jQuery HTML CSS 효과

답변

관련 문제