[分享]css3弹窗缩小到右下角

CSS3的弹窗效果让网页的交互更加生动，其中弹窗缩小到右下角效果是很受欢迎的一种效果。

/*弹窗样式*/
.popup{
   width: 300px;
   height: 200px;
   background-color: #ffffff;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 20px rgba(0,0,0,0.2);
   border-radius: 5px;
   z-index: 2;
}

/*触发按钮样式*/
.button{
   font-size: 14px;
   background-color: #f5a623;
   color: #ffffff;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
}

/*弹窗缩小到右下角动画*/
.popup.shrink{
   animation: shrink 0.5s forwards;
}

@keyframes shrink{
   0%{
      transform: translate(-50%, -50%);
   }
   100%{
      transform: translate(50%, 50%);
   }
} 

这里通过设置一个popup类来设置弹窗的样式，触发弹窗的按钮设置为button类，使用了animation动画和keyframes关键帧方法使得弹窗能够缩小到右下角。

当需要缩小弹窗时，只需要将popup类添加shrink类即可触发缩小动画：

document.getElementById("popup").classList.add("shrink"); 

通过CSS3弹窗缩小到右下角效果可以让网页的交互效果更加生动，为用户提供更好的体验。