开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

过渡 transition

可以让我们看到元素变化的整个过程

参数

1. 元素要实现过渡的属性 transition-property

2. 过渡的持续的时间 transition-duration

3. 速度函数 transition-timing-function

   1. linear 匀速
   2. 

4. 延迟时间 transition-delay

复合写法

transition:height 1s ;

内减模式

0. 容器的宽度 === 在样式中写死 width:100px
1. 增大 边框 和 内边距 都不会增大 盒子的宽度 只会导致 内容减小 。

在写静态页面的时候 直接写上

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

3d旋转 rotate3d(x,y,z,deg)

1.rotate3d(1,1,0,30deg)

2.rotate3d(1,2,0,30deg)

3.rotate3d(1,1,1,30deg)

css3的动画 animation

动画的效果和过渡很相似，都可以看到元素变化的过程

动画更加强大， 无限循环的播放

动画的参数 8个

1. 动画的名称 重要
2. 动画的持续的时间 重要
3. 动画的速度曲线 一般
4. 动画的延迟时间 一般
5. 动画的播放次数 无限播放 重要
6. 动画的播放的方向 --- 一般
7. 动画播放之外的状态 一般
8. 动画 播放还是暂停 一般

简单实现一个旋转木马

学习了以上的知识点，那么我们来简单实现一个旋转木马，以下是实现的大概思路和图解。其中，还需要用到三角函数的部分知识，可以使用科学计算机进行计算。