CSS：将颜色应用于灰线时的动画/翻译效果

-4

简单问题：我想将最初为黑色的线涂成绿色。每当我应用绿色时，它会立即应用到线buti希望缓慢从左到右应用绿色。我怎么能得到这个效果。 CSS：将颜色应用于灰线时的动画/翻译效果

<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>

来源

2017-06-15 Jay Teli

哪里是你的代码..！ – 2017-06-15 05:39:54

你什么时候申请这门课？点击？悬停？你为什么要使用jQuery来申请一个类，当你只能使用CSS来实现你想要的？请参阅下面的Rohit的答案。还...编辑与您的代码和你已经尝试过的问题 –

我已经添加了我的代码，我点击一个按钮，应用这个类。 –

我已经对鼠标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(){ 
 
     \t $('.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"> 
 
\t <div class="line-green"></div> 
 
</div>

来源

2017-06-15 05:46:26

看起来不错。但问题是我需要它，当一个名为绿色的类被应用于该行时。 –

一旦这个类被应用。该线应该从左到右变成绿色。并保持绿色。没有悬停效果 –

线条最初是黑色的，点击变成绿色 –

CSS：将颜色应用于灰线时的动画/翻译效果

回答

相关问题