Question

我之前从未使用过CSS动画，但我希望在下一个项目中使用。我有这个：

但是，不要让颜色发生变化，我希望它以与进度条相同的方式从左到右填充。这可能是边框颜色吗？

.box{
 position : relative;
 width : 200px;
 height : 50px;
 background-color : black;
 color:white;
 border-bottom: 5px solid grey; 
 -webkit-transition : border 500ms ease-out; 
 -moz-transition : border 500ms ease-out;
 -o-transition : border 500ms ease-out;
}

.box:hover{
   border-bottom: 5px solid red;
}

Answer 1

您可以根据Fill background color left to right CSS调整答案：

#box{
    position : relative;
    top: 10px;
    left: 10px;
    width : 100px;
    height : 100px;
    background-color : gray;
}
#simulate_border {
    position : relative;
    width : 120px;
    height : 120px;
    background: linear-gradient(to right, red 50%, black 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 500ms ease;
}
#simulate_border:hover{
    background-position:left bottom; 
}

jsFiddle

对角线进展也是可能的 - jsFiddle2

Answer 2

您可以使用背景渐变和背景大小通过转换为其设置动画： DEMO

#box {
    position : relative;
    width : 100px;
    height : 100px;
    padding:5px;
    margin:1em;
    background: linear-gradient(to right, red, red) top left, linear-gradient(to right, red, red) bottom right, linear-gradient(to right, red, red) top left, linear-gradient(to right, red, red) bottom right;
    background-repeat:no-repeat;
    background-size:3px 100%, 3px 100%, 100% 3px, 100% 3px;
    transition : 500ms ease-out;
    background-color : gray;
}
#box:hover {
    background-size:3px 0%, 3px 0%, 0% 3px, 0% 3px;
}

SVG也可能是一个提示。

动画颜色变化？

2 个答案: