大家都知道那个“抖动缩放”动画？就是把东西放大缩小，然后随便晃两下那种。这样做不仅能让画面更生动，还能很好地引起人们的注意。像是我们平时用手机看网站的时候，有些页面就会用到这个特效，让页面变得更有活力，不那么枯燥。所以说，网页设计里那个“抖动缩放”效果真是个简单又好用的小技巧！
为了弄出抖动缩放啥的特效，关键就是把握好元素的缩放和移动节奏。利用CSS动画，我们就可以给特定百分比设定元素的玩样儿，让它在你所需的地方动起来和放大缩小，这招儿简单实用，能应对各种网页设计要求！
2. CSS关键帧动画示例
制作元素抖动和缩放效果，只需用CSS里的@keyframes关键帧动画就能搞定！这个小样我给你打个比方：
css
@keyframes shake {
0%, 100%{
transform: scale(1);
}
25%{
大小翻倍，同时左右各挪动了5%。
75%{
把它缩小到原来的80%，然后移动个5%往上走，再移动个5%往右下角挪。
}
<pre class='brush:css;toolbar:false;'>@keyframes shake {
0% {
transform: scale(1);
}
25% {
transform: scale(1.5) translateX(-5px) translateY(-5px);
}
50% {
transform: scale(1);
}
75% {
transform: scale(0.5) translateX(5px) translateY(5px);
}
100% {
transform: scale(1);
}
}
.element {
animation: shake 1s infinite;
}
这代码里头，咱们创建了一个叫shake的关键帧动画。通过调节不同比例下物体的transform属性，就能做出物体各种状态下的大小变化和位置移动特效~告诉你，比如25%的时候变大点+往左上方挪挪身；到75%时呢变小+向右下方走走，这样就能看起来像是抖动的缩放！
3.如何应用CSS动画到元素
要用刚才那个关键帧动画的设定放在实际的东西上，得用那种叫做”animation”的属性！下面就是一段简单的代码例子：
.element {
animation: shake 1s infinite;
这行代码就是给名叫 element 的玩意儿加个叫“Shake”的关键帧动画。你只需要设定一下 animation 属性，把”shake”这个名字输进去，还有时间啦（1秒钟），顺序啊（无限循环啥的），然后这个东西就会开始摇来晃去、缩放不定了。
4.调整抖动缩放效果参数
除了咱们之前说的那些方法之外，你要是有其他特别的要求，也能随心所欲地改抖动缩放的几个小数值。比如说呢：
-调节时间：只需调整animation属性里的时间数字，就能控制整个晃动放大的时长！
-调动画移幅度:改动 translateX 和 translateY 的数值，就可以控制元素在横竖两个方向上的移动距离了。
-别急，我能慢慢让你感觉到：试试在代码里加点ease-in和ease-out，就能改变物体移动的速度变化了！
-配上别的CSS属性：比方说，把抖动缩放效果和颜色渐变、透明度变化之类的其他CSS属性搞在一起，会让它变得更生动有趣！
5. CSS动画丰富多彩
别以为CSS只能变个大小，其实它还有很多别的花样！你知道吗？像什么旋转啊、逐渐显示或消失啦、像滑翔那样动来动去的这些都能轻松搞掂。只要用得巧，就能做出五颜六色、好玩又有杀伤力的网页效果了。
用好CSS的各种功能和方法，就能让你做出的网页看起来更有趣，有创意且跟用户互动好多。无论是卖东西的网站，还是记录生活点滴的博客，甚至是APP的界面，都可以让用户的使用感觉更好，也吸引人多看几眼~
6.实践与总结
说到底，用CSS做网页设计时，搞个元素摇晃放大缩小效果就是一种简便又给力的手法。我们只需要定好关键连续的动作步骤并微调下设置值就能轻松弄出来让人眼前一亮的专业级页面试玩效果~
实用的话，要根据需求来调参数，还要记得综合考虑别的设计因素。就得多试多练才行，把CSS的优点了解透了，作品才能更出色！
希望这篇文章教你们如何用CSS做元素抖动缩放效果，激发你们更多的网页设计创意。将来你们设计处更好的东西，让用户更爽，页面更好看。
评论0