html166-182（杀青）_关键帧动画单一属性-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_nevermore/article/details/128540793

文章介绍了HTML中的关键帧动画，包括如何声明动画、单一属性动画以及轮播和逐帧动画案例。同时，详细讲解了animate动画库的使用。此外，还探讨了网格布局的各种用法，如固定值、百分比、重复、自动填充以及min和max的运用，以及间距、对齐方式和项目属性的设置。

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

关键帧动画-属性

在这里插入图片描述

/*声明动画*/
@keyframes identifier {
from{
width: 200px;
height:200px;
background:
red;
to{
width: 400px;
height:600px;
background:
green;}
}

还可以使用
0%
25%
50%
100% 的百分比写法定义n多个动画

在这里插入图片描述

{animation-fill-mode: forwards;}
none 默认值
forwards 最后的画面
backwards 初始画面

主要思路：
在这里插入图片描述
改变X得值

animation: run 5s steps(1,end);

因为逐帧所以不可以使用linear

在这里插入图片描述

给什么标签都可以加上display：grid 会使其变成块

举例子：固定值三行三列

grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;

百分比四行四列

grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%;

重复三行三列

grid-template-rows: repeat(3,33,33%);
grid-template-columns: repeat(3,33,33%);

自动重复

grid-template-rows: repeat(auto-fill,Bb0px);
grid-template-columns: repeat(auto-fill,20%);

fr 片段

grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px;

min 和max

grid-template-rows: minmax(100px,200px) 200px 300px;
grid-template-columns: 200px 200px 200px;

auto和fr很像

grid-template-rows: 100px auto 200px;
grid-template-columns: 100px auto 20ppx;

在这里插入图片描述

形状只可以正方形或者矩形

在这里插入图片描述

在这里插入图片描述

grid-column: 1/5; 第一条到第五条
grid-row:1/3;