xxxpara
V2EX  ›  CSS

css 如何实现这种颜色的局部动态切换

  •  
  •   xxxpara · Mar 21, 2015 · 4633 views
    This topic created in 4080 days ago, the information mentioned may be changed or developed.

    http://www.everants.com/wp-content/uploads/2015/03/QQ截图20150321200946.png
    当蓝色进度条移动到文字处时蓝色背景的部分文字会变成白色

    11 replies    2015-03-22 22:40:37 +08:00
    abelyao
        1
    abelyao  
       Mar 21, 2015
    最简单的就是做个 a:hover 咯,然后把背景色对调一下。
    xxxpara
        2
    xxxpara  
    OP
       Mar 21, 2015
    @abelyao 这个不是通过鼠标触发的,而是进度条自己增加
    abelyao
        3
    abelyao  
       Mar 21, 2015
    @xxxpara 你就给了一张 png 也没给页面不知道具体是怎样的效果。
    不明白所谓的“进度条”是指什么,如果是一个定时效果的话,CSS 3 中已经有了关于动画的样式,也可以指定多少时间之后发生什么样式改变。
    xxxpara
        4
    xxxpara  
    OP
       Mar 21, 2015
    @abelyao 这个我知道,但是这里的是这样的:随着进度条覆盖掉文字文字的颜色跟着改变
    我只能想到弄两个div一个在上一个在下去实现
    abelyao
        5
    abelyao  
       Mar 21, 2015
    @xxxpara 两个元素完全可以实现,把动画时间控制好就行了。
    yangff
        6
    yangff  
       Mar 22, 2015 via Android
    一层白色底
    一层蓝色进度条
    一层蓝色文字
    一层白色文字
    +一层遮罩进度条给文字做mask,动画和蓝色进度条保持一致

    这样应该可以吧。。
    yangff
        7
    yangff  
       Mar 22, 2015 via Android   ❤️ 1
    唔。。白色文字和蓝色进度条可以放一起,然后加一个mask或者关于width的动画应该也行。。?
    MaiCong
        8
    MaiCong  
       Mar 22, 2015
    文字根据进度变色我还玩不来,只能这样:

    http://codepen.io/anon/pen/azPawX
    czheo
        9
    czheo  
       Mar 22, 2015   ❤️ 1
    xxxpara
        10
    xxxpara  
    OP
       Mar 22, 2015
    @czheo 厉害,伪元素还能这么用
    wsph123
        11
    wsph123  
       Mar 22, 2015   ❤️ 2
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3006 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 09:01 · PVG 17:01 · LAX 02:01 · JFK 05:01
    ♥ Do have faith in what you're doing.