jQuery HTML CSS效果

-2

只有使用jQuery/HTML/CSS才能實現從左下角到右上角的塊元素的對角線過渡。所以三角形的形狀填補了過渡期，直到塊被填滿？jQuery HTML CSS效果

我之後，因爲我有用戶不支持CSS3轉換的瀏覽器。理想情況下，這將在Chrome和IE8工作+

時間之後，這是我獲得的：

工程在IE8 + | Chrome |火狐

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

大教堂，洞察力和樂於助人 – goingsideways

這應該是可以的。假設你有一個正方形的塊，其中overflow: hidden。那麼你有一個內部的廣場，絕對定位在屏幕外可以這麼說。使用jquery動畫屬性，你可以動畫內部塊的位置，所以它移動到位置0px/0px

我懶得創建一個圖像，但你可以消除專有的CSS規則，如果你使用圖像像我在示例中那樣使用CSS來旋轉正方形。

來源

2013-09-01 00:45:15 JakeParis

最佳答案和解決方案 – goingsideways

jQuery HTML CSS效果

回答

相關問題