V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
xxxpara
V2EX  ›  CSS

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

  •  
  •   xxxpara · 2015-03-21 20:22:07 +08:00 · 3951 次点击
    这是一个创建于 3535 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    http://codepen.io/anon/pen/azPawX
    czheo
        9
    czheo  
       2015-03-22 12:06:51 +08:00   ❤️ 1
    xxxpara
        10
    xxxpara  
    OP
       2015-03-22 12:48:11 +08:00
    @czheo 厉害,伪元素还能这么用
    wsph123
        11
    wsph123  
       2015-03-22 22:40:37 +08:00   ❤️ 2
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2426 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:02 · PVG 00:02 · LAX 08:02 · JFK 11:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.