css3放大旋转动画效果

CSS3作为前端开发中的必备技能，提供了许多动画效果，其中放大旋转动画效果是非常常见的一种。下面我们来学习一下如何通过 CSS3 实现这种动画效果。

.animation {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: relative;
    animation: zoom-and-rotate 2s ease-in-out infinite;
}
@keyframes zoom-and-rotate {
0% {
    transform: scale(1) rotate(0deg);
}
50% {
    transform: scale(1.5) rotate(45deg);
}
100% {
    transform: scale(1) rotate(0deg);
}
}
    

首先定义一个class名为.animation的元素，设置其宽高以及背景颜色，同时相对定位，以便于动画效果的展示。

接着通过animation属性调用名为"zoom-and-rotate"的动画，设置动画时间为2秒、缓动方式为"ease-in-out"并且无限循环。

最后通过@keyframes定义"zoom-and-rotate"动画的关键帧，其中0%表示动画开始时的状态，50%表示动画进行到一半的状态，100%表示动画结束时的状态。在这个动画中，我们实现了从1倍大小旋转0度到1.5倍大小旋转45度再回到1倍大小旋转0度的效果。

使用以上代码就可以轻松地实现一个放大旋转动画效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！