HTML 代码：

CSS 代码：/* 触发弹窗图片的样式 */#myImg { border-radius: 5px; cursor: pointer; transition: 0.3s;} #myImg:hover {opacity: 0.7;} /* 弹窗背景 */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */} /* 图片 */.modal-content { margin: auto; display: block; width: 80%; max-width: 700px;} /* 文本内容 */#caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px;} /* 添加动画 */.modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;} @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)