css 好看的动画效果图

CSS动画是前端开发中一个不可或缺的部分，能够给网站增加生气和活力。

在这里，我分享一些我个人认为很漂亮的CSS动画效果。

/* 悬浮放大效果 */.box {
      transition: all 0.2s ease-in-out;
}
.box:hover {
      transform: scale(1.2);
}
/* 翻页效果 */.book {
      perspective: 800px;
}
.book .page {
      transition: all 0.8s cubic-bezier(0.67, 0.17, 0.4, 0.83);
}
.book:hover .page {
      transform: rotateY(-180deg);
}
/* 手机桌面图标效果 */.icon {
      transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.5);
}
.icon:hover {
      transform: translateY(-5px);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* 无限旋转效果 */.circle {
      animation: circle-rotate 2s infinite linear;
}
@keyframes circle-rotate {
  from {
        transform: rotate(0);
  }
  to {
        transform: rotate(360deg);
  }
}
    

以上动画效果只是冰山一角，希望你能够在自己的项目中多使用CSS动画，让你的网站更加迷人！

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