css实现忽大忽小的变量 |jq css 翻书效果代码

.resizable {
width: 100px;
height: 100px;
background-color: #FFDB58;
animation: resize 1s linear infinite;
}
@keyframes resize {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}

以上代码中，大家创建了一个名为resizable的class，其宽高均为100px，背景色为#FFDB58。通过animation属性和resize关键字，大家可以将其应用于一个名为resize的keyframes中。

在keyframes中，大家定义了三个变量：0%、50%和100%。这三个变量分别表示了动画的起点、中点和终点。大家可以根据需求来设置哪个点需要改变，实现不同的动画效果。如上述代码中，大家在50%的地方将宽高同时放大到原来的1.5倍，然后在100%的位置将其缩小回原始大小。

最后，通过transform的scale方法，大家把整个元素的大小进行了修改。将1视为原始大小，即可实现忽大忽小的变化效果了。