[分享]css3弹框动效

CSS3弹框动效经常在网站和移动应用程序中使用，可以让用户界面更加现代和吸引人。这篇文章将介绍几种常用的CSS3弹框动效，希望对你有所帮助。/ 基本样式 / .popup { : fixed; top...

CSS3弹框动效经常在网站和移动应用程序中使用，可以让用户界面更加现代和吸引人。这篇文章将介绍几种常用的CSS3弹框动效，希望对你有所帮助。

/* 基本样式 */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.popup--open {
  opacity: 1;
  visibility: visible;
}

/* 动效一：从中心弹出 */
.popup {
  transform: translate(-50%, -50%) scale(0.9);
}

.popup--open {
  transform: translate(-50%, -50%) scale(1);
}

/* 动效二：从底部弹出 */
.popup {
  transform: translate(-50%, 100%);
}

.popup--open {
  transform: translate(-50%, 0);
}

/* 动效三：淡入淡出 */
.popup {
  opacity: 0;
}

.popup--open {
  opacity: 1;
}

/* 动效四：从左侧弹出 */
.popup {
  transform: translate(-150%, -50%);
}

.popup--open {
  transform: translate(-50%, -50%);
}

/* 动效五：从右侧弹出 */
.popup {
  transform: translate(150%, -50%);
}

.popup--open {
  transform: translate(-50%, -50%);
} 

以上就是一些常用的CSS3弹框动效。使用这些动画可以为用户界面增添更多的现代感和动态效果，但请确保不要过度使用，以免影响用户体验。