CSS : 将颜色应用于灰线时的动画/平移效果

Question

简单问题：我想将一条最初为黑色的线条着色为绿色。每当我应用绿色时，它会立即应用到 while 行，但我希望绿色从左到右缓慢应用。我怎样才能得到这个效果。

<div class="col-md-1 col-sm-1" id="dev_resend_request">
      <div class="settingiconblue">
          <div class="settingdivblue">
              <a href="">
                  <span class="fa-stack fa-2x">
                      <i class="fa fa-refresh" style="color:green"></i>
                  </span>
              </a>
          </div>
          <p class="box-title">Resend Request</p>
      </div>
  </div>

Answer 1

我在鼠标上做了同样的效果hover。您可以根据您的代码情况更改它，也可以将其与 jQuery.

一起使用

.line {width: 100%; height: 10px; background: black; position: relative;}
.line:before {content: ""; background: green; width: 0px; height: 100%; transition: all 2s ease-in-out; position: absolute; top: 0px; left: 0px;}
.line:hover:before {width: 100%;}

<div class="line"></div>

此代码将对 click 事件生效...

$(document).ready(function () {
      $('.line').on('click', function(){
       $('.line-green').css('width', '100%');
      });
});

.line {width: 100%; height: 10px; background: black; position: relative;}
.line-green {position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: green; transition: all 2s linear;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="line">
 <div class="line-green"></div>
</div>

CSS : 将颜色应用于灰线时的动画/平移效果

CSS : Animation / Translation effect when a color is applied to a grey line

css

css-animations

jquery-animate