CSS的过渡属性

作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验

属性名:transition

常见取值:

  • all 1s 所有能过渡的属性都过渡,过渡时间为1秒
  • width 1s 只有width有过渡,过渡时间为1秒
  • width 1s, background-color 2s; 只有width和bgc过渡,过渡时间分别为1秒和2秒

写法示例:

    div {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: width 1s, background-color 2s;
        }
        
        div:hover {
            width: 800px;
            background-color: blue;
        }

注意点:

  1. 给过渡需要:默认状态和hover状态样式不同,才能有过渡效果
  2. transition属性给需要过渡的元素本身加。
  3. transition属性设置在不同状态中,效果不同 
    • ▶给默认状态设置,鼠标移入移出都有过渡效果
    • ▶给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

​精灵图的介绍及使用步骤

2021-11-28 16:32:08

知识碎片

数据库—运算符

2021-11-28 23:21:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧