Question

我有一个在悬停时填充自己的区域的示例，它是通过将:before伪元素从宽度0加宽到宽度100％来完成的。我得到的问题是当:before元素太窄而其边框与父元素的边界不匹配时，会发生这种情况，因为边框是圆的，并且因为圆形边框的半径不能大于最小的物体尺寸这是可以理解的。

这会在动画开头产生一个我不知道如何修复的故障。

我也试图找到一种方法用对角线填充方框而不是垂直线，这是伪块的右边界，有没有人知道这样做的方法，理想情况下只有html和css ？

这是我到目前为止的代码：

http://jsfiddle.net/tchikago/egtLx4re/2/

.fillingBox {
    position: relative;
    width: 300px;
    height: 50px;
    background: green;
    border-radius: 15px;
}
.fillingBox:before {
    content:"";
    position: absolute;
    background: red;
    bottom: 0;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 15px;
    right: 100%;
    transition: right 2s;
}
.fillingBox:hover:before {
    right: 0;
}

对于以下html元素

<div class="fillingBox"></div>

感谢您的帮助

Answer 1

我认为这就是你要找的东西：

＆＃13;

.fillingBox {
  position: relative;
  width: 300px;
  height: 50px;
  text-align: center;
  background: green;
  background: linear-gradient(to left, green 50%, red 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  border-radius: 15px;
  transition: all 1s ease;
}

.fillingBox:hover {
  background-position: left bottom;
}

＆＃13;

<div class="fillingBox"></div>

＆＃13;

这是一个更好的方法，因为它会改变背景，这将始终是正确的形状。

Answer 2

您可以使用CSS关键帧动画完成第一个问题。我所做的是给元素一个min-width 30px，两倍的边界半径。这可以防止角落变形。然后隐藏:before伪元素，并在悬停时显示。然后向左偏移30px，不透明度为0。悬停会导致不透明度再次设置为1并拉伸元素。

.fillingBox:before {
    /* other stuff */
    display: none;
    min-width:30px;
    /* other stuff */
}
.fillingBox:hover:before {
    display: block;
    animation: redfill 600ms linear;
    animation-fill-mode: forwards;
}
@keyframes redfill {
    0% {
        opacity: 0;
        left: -30px;
        right: 100%;
    }
    1% {
        opacity: 0;
        left: 0px;
        right: 100%;
    }
    2% {
        opacity: 1;
        left: 0px;
        right: 100%;
    }
    100% {
        opacity: 1;
        left:0%;
        right: 0%;
    }
}

这有一点小故障，初始动画宽度为30px，但不是很明显。

JSFiddle

带有圆角边框的CSS填充框

2 个答案: