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

如何在 hover 过一个条目的时候,增加渐进的特效?

  •  
  •   yazoox · 2021-08-03 17:18:37 +08:00 · 867 次点击
    这是一个创建于 969 天前的主题,其中的信息可能已经有所发展或是发生改变。

    主要,有两个特效的问题,

    • 经常看到一些列表 /list,里面有一些 items

    当鼠标划过的时候(hover),item 会高亮,比如,底色变化成另外一种颜色。关键是,会有一个“逐渐明亮”或者“逐渐变化”的过程。

    这个是如何实现的。

    比如,我现在的 item css,会有一个 hover, 但真的只能“变色”,而且是突变,没有渐变的特效。

    const StyledContainer = styled.div<Props>`
      display: flex;
      padding-left: ${props => props.level * defaultIndent}px;
      width: 100%;
      height: ${props.theme.size.xxxl};
      align-items: center;
      background: ${props =>
        !props.isSelected
          ? props.theme.color["300"]
          : props.theme.color["100"]};
    
      &:hover {
        background: ${props => props.theme.color["200"]};
      }
    `;
    
    
    • 有时候,有 expand/collapse 列表,同样的,展开或者收缩的时候,也会有特效,那个特效怎么做的?

    谢谢!

    3 条回复    2021-08-03 17:29:50 +08:00
    hsfzxjy
        1
    hsfzxjy  
       2021-08-03 17:22:01 +08:00 via Android
    css transition
    Kilerd
        2
    Kilerd  
       2021-08-03 17:28:57 +08:00
    transition: background-color linear 0.1s
    shuxhan
        3
    shuxhan  
       2021-08-03 17:29:50 +08:00
    transition: all 0.2s linear
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3571 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:31 · PVG 18:31 · LAX 03:31 · JFK 06:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.