CSS3@keyframes关键帧学习记录！

CSS3@keyframes关键帧学习记录！最近突然发现简单的CSS已经满足不了我的需求，就想要通过更高级的css满足响应式的页面

---

设置页面背景颜色为实时动态背景渐变颜色:

        @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }

            100% {
                background-position: 100% 50%;
            }
        }

        body {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(50deg, #FF5733, #5ECBF8);
            background-size: 400% 400%;
            animation: gradientAnimation 10s infinite alternate;
        }

代码详细解释:

1. @keyframes gradienAnimation:这行代码定义了一个名为gradienAnimation的关键帧动画。关键帧动画允许您指定在动画进行过程的不同时间点上的样式
2. 0%和100%:这些百分比值表示动画的开始和结束状态。
3. background-position:这是一个css属性，用于指定背景图片的起始位置。
4. background-position:0% 50%；:在动画的开始状态（0%）下，背景图片的位置是从左侧起始位置（0%）开始，垂直居中（50%）。
5. background-position:100% 50%; :在动画的结束状态（100%）下，背景图片的位置是从右侧结束位置（100%）结束，垂直居中（50%）。
6. body:这是一个CSS选择器，表示选择所有的元素。
7. width:100vw和100vh这些属性将body元素的宽高设置为视图宽高都被背景覆盖。
8. background:linear-gradient(50deg,#FF5733,#5ECBF8);这行代码创建了一个线性渐变背景。渐变的角度上50度，颜色从#FF5733（橙红色）过渡到#5ECBF8（淡蓝色）
9. background-sizi:400% 400%;这行代码设置背景图片的尺寸为原始尺寸的400%。这样可以创建一个大尺寸的背景，以便在动画过程中移动背景位置。
10. animation:gradientAnimation 10s infinite alternate;:这行代码将之前定义的gradientAnimation动画应用与元素。动画的持续时间是10秒，无限循环播放，并且在没错循环中交替播放开始和结束状态