### 彪哥

爱好前端

- HTML

- CSS

  - CSS教程和技巧收藏
  - flex布局语法
  - flex布局案例-基础
  - flex布局案例-骰子
  - flex布局案例-圣杯布局
  - flex布局案例-网格布局
  - flex布局案例-输入框布局
  - CSS3之transition过渡
  - CSS3之animation动画
  - 「布局技巧」图片未加载前自动撑开元素高度
  - 文字在一行或多行时超出显示省略号
  - 从box-sizing属性入手，了解盒子模型
  - 水平垂直居中的几种方式-案例
  - 如何根据系统主题自动响应CSS深色模式
  - 「css技巧」使用hover和attr()定制悬浮提示
  - CSS-function汇总
  - CSS给table的tbody添加滚动条

- 页面
- CSS

heBody
2019-12-25

# CSS3之transition过渡

# # CSS3之transition过渡

html结构

    <div class="box1">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
    </div>

1
2
3
4
5

先给元素设置transition过渡，指定样式和时间，这里设置all全部样式都采用0.3s的过渡

    .box1>div{
      /* 给元素所有变化都添加过渡动画, 也可以指定唯一的过渡样式属性*/
      transition: all .3s;
    }

1
2
3
4

> 鼠标经过元素测试效果

宽度过渡

    .div1:hover{width: 150px;}

1

背景色过渡

    .div2:hover{background: #999;}

1

按贝塞尔曲线设置的过渡

    /贝塞尔曲线过渡/
    .div3{transition-timing-function: cubic-bezier(.39,.62,.74,1.39)}
    .div3:hover{transform: translate3d(-25px, -25px, 0)}

1
2
3

### # 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等 X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。 如：直线linear，即cubic-bezier(0,0,1,1)

贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67

参考：https://www.w3school.com.cn/css3/index.asp

编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
flex布局案例-输入框布局
CSS3之animation动画

← flex布局案例-输入框布局 CSS3之animation动画→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式