纯css图片弹出效果代码

纯CSS图片弹出效果是一种使用CSS动画和过渡效果来创建图片显示和隐藏动画的技术。这种效果通常用于网页设计中的图片展示，可以增强用户体验，使网站更加吸引人。

基础概念

CSS动画：使用@keyframes规则定义动画序列，并通过animation属性应用到HTML元素上。
CSS过渡：通过transition属性实现元素状态改变时的平滑过渡效果。

类型

淡入淡出：通过改变元素的透明度实现。
滑动：元素从屏幕的一侧滑入或滑出。
缩放：元素大小的变化。

应用场景

图片库或画廊
购物网站的产品展示
博客文章中的插图

示例代码

以下是一个简单的纯CSS图片弹出效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Popup</title>
<style>
  .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .popup img {
    width: 100%;
    height: auto;
  }
  .popup.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>
</head>
<body>

<button onclick="togglePopup()">Show Popup</button>

<div class="popup" id="popup">
  <img src="https://via.placeholder.com/600x400" alt="Sample Image">
</div>

<script>
  function togglePopup() {
    document.getElementById('popup').classList.toggle('active');
  }
</script>

</body>
</html>