本文介绍了CSS中的变换技巧，包括CSSTransform的平移、旋转、缩放和倾斜，以及如何通过transition实现平滑过渡效果。此外，还详细讲解了Animation的使用，用于创建更复杂的样式动画。最后，探讨了响应式设计的重要性，特别是如何利用设计视口实现不同屏幕尺寸的适配。
1.CSS Transform 变形
对元素进行平移、旋转、缩放、倾斜
- translate
- rotate
- scale
- skew
- transform不会对其他元素的布局产生影响
2.transition过渡
- 指定从一个状态到另一个状态时如何过渡
- 动画的意义：告诉用户发生了什么
- transition属性:
- transition-property表示哪个属性发生变化时我们需要过渡
- transition-duration表示过渡需要的时间
- transition-timing-function表示这个变化时匀速的还是其他的
- transition-delay表示这个变化是立即进行还是有延迟
3.Animation
- 可以实现更复杂的样式变换效果
- 使用方法
- 定义关键帧的样式
- 应用动画到元素上
4.响应式设计
即使页面能适应不同的屏幕大小
- 设计视口viewport:在header标签里面添加一个meta name="viewport"
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
