Luke's home Luke's home
首页
  • 前端文章

    • JavaScript
页面
技术
更多
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Luke xiao

K
首页
  • 前端文章

    • JavaScript
页面
技术
更多
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • javascript

    • 基础知识
    • 进阶知识

    • 函数

    • JS HTML DOM

    • JS 高级教程

    • 浏览器BOM

    • HTML5新特性

    • CSS3新特性

      • 结构伪类选择器
      • 伪元素选择器
      • css3盒子模型
      • 滤镜filter
      • calc函数
      • 过渡
        • 定义
        • 值
          • 要过渡的属性
          • 花费时间
          • 运动曲线
          • 何时开始
        • 例子
        • 属性加在哪个元素
      • 2d转换
      • 动画
      • 3D转换
  • 布局

  • less

  • js库

  • 前端
  • javascript
  • CSS3新特性
lukexiao
2021-05-20

过渡

# 定义

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover (opens new window),:active (opens new window) 或者通过 JavaScript 实现的状态变化。

# 值

transition:xxx,xxx,xx,,xx

# 要过渡的属性

很简单就是元素的属性 比如width,, 如果多个就用逗号隔开,所有就写all

比如 transition:width 2s, color 2s;

# 花费时间

单位是秒 ,必须写单位

# 运动曲线

默认是ease(可以省略)

# 何时开始

单位是秒,必须写单位,可以设置延迟触发的时间,默认是0s

# 例子

div{
   width: 500px;
   height: 100px;
   background-color: red;   
   transition:all 2s;
}
div:hover{
  background-color: blue;
  width: 300px;
}
1
2
3
4
5
6
7
8
9
10

这样就会有一个渐变的过程了 在两秒呢

# 属性加在哪个元素

谁过渡加在谁的身上

编辑 (opens new window)
上次更新: 2021/08/13, 23:21:49
calc函数
2d转换

← calc函数 2d转换→

最近更新
01
流式布局
08-13
02
flex布局
08-13
03
rem布局
08-13
更多文章>
Theme by Vdoing | Copyright © 2021-2021 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式