Question

可以单独使用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)  
});

Answer 1

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

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

jQuery HTML CSS效果

1 个答案: