-2

可以单独使用 jQuery / HTML / CSS 来动画块元素从左下角到右上角的对角线过渡。那么三角形填充过渡期，直到块被填充？

我在这之后，因为我的用户使用不支持 CSS3 转换的浏览器。理想情况下，这适用于 Chrome 和 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)  
});
4

1 回答 1

4

这应该是可能的。假设您有一个正方形的块，其中overflow: hidden. 那么你在那个里面有一个内部正方形，可以说绝对位于屏幕外。使用 jquery animate 属性，您可以为内部块的位置设置动画，使其移动到位置 0px/0px

我懒得创建图像，但是如果您使用图像而不是像示例中那样使用 CSS 来旋转正方形，则可以消除专有的 css 规则。

于 2013-09-01T00:45:15.943 回答