CSS3实现点击放大的动画实例代码

前言

最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。

技术重点css3: @keyframes  animation

示例代码

 @keyframes myfirst {
     0% {
  width: 50px;
  height: 50px;
  top: 10px;
  right: 10px;
     }
     75% {
  width: 60px;
  height: 60px;
  top: 5px;
  right: 5px;
     }
     100% {
  width: 50px;
  height: 50px;
  top: 10px;
  right: 10px;
     }
 }
 .warp {
     width: 400px;
     height: 300px;
     position: relative;
     background: #ccc;
 }
 .btn {
     position: absolute;
     width: 50px;
     height: 50px;
     border:solid 3px #cc3c24;
     top: 10px;
     right: 10px;
     border-radius: 8px;
     cursor: pointer;
 }
 .btn.cur{
     animation: myfirst 0.2s;
 }
 .btn.yes{
     background: #cc3c24;
 }
    



    

效果图如下：

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对考高分网的支持。