【CSS笔记】CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

Mr.小朱同学

于 2023-05-03 16:23:49 发布

阅读量1.2k

点赞数 1

分类专栏： Web前端笔记文章标签： css 旋转、平移、缩放动画 CSS动画2d、3d效果关键帧动画 animation

本文链接：https://blog.youkuaiyun.com/qq_39826207/article/details/130458635

版权

Web前端笔记专栏收录该内容

41 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了CSS3的2d和3d动画效果，包括渐变色、过渡、平移、缩放、旋转、倾斜及关键帧动画的使用。通过实例代码展示了如何实现线性、径向、重复渐变，以及如何使用transition、transform进行元素变换和平移等操作。同时，文章还讲解了关键帧动画的原理和animate动画库的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章，主要介绍CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。

一、2d动画

1.1、渐变色

（1）线性渐变色

线性渐变色，是指从一个方向到另一个方向发送颜色的深浅变化，语法格式：

/**
方向：默认从左到右
to left：从右到左
to right：从左到右
to top：从下到上
to bottom：从上到下
to right bottom：从左上到右下
to left top：从右下到左上
to right top：从左下到右上
to left bottom：从右上到左下
 */
background:linear-gradient(设置方向，颜色1，颜色2[可以多个]...);

案例代码：