jQuery HTML CSS 效果 [关闭]答案

【问题标题】：jQuery HTML CSS effects [closed]jQuery HTML CSS 效果 [关闭]
【发布时间】：2017-10-24 23:04:11
【问题描述】：

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

因为我有用户使用不支持 CSS3 过渡的浏览器，所以我在关注此问题。理想情况下，这适用于 Chrome 和 IE8+

经过时间，这是我得到的：

适用于 IE8+ |铬 |火狐

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)  
});

【问题讨论】：

是的，这是可能的。还有其他问题吗？
是的，使用 javascript/jQuery 是可能的，但我们无法为您完成。你试过什么？如果不尝试，这个话题可能会被关闭......
Dom，有见地，乐于助人

标签： jquery html css animation

【解决方案1】：

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

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

【讨论】：

最佳答案和解决方案